@keyframes background_0{100%{background:center/cover no-repeat;background-image:linear-gradient(115deg,#000,#222)}} @keyframes text_1{100%{content:"The Great Pizza Plant Mystery";top:50%;left:0%;text-align:center;font-size:32px;font-weight:bold;}} @keyframes fadein_2{0%{opacity:0%;} 100%{opacity:100%;}} @keyframes fadeout_4{0%{opacity:100%;} 100%{opacity:0%;}} @keyframes text_5{100%{content:"by Claude";top:50%;left:0%;text-align:center;font-size:32px;font-weight:bold;}} @keyframes fadein_6{0%{opacity:0%;} 100%{opacity:100%;}} @keyframes fadeout_8{0%{opacity:100%;} 100%{opacity:0%;}} @keyframes background_9{100%{background:center/cover no-repeat;background-image:url(./pizza/plant.png)}} @keyframes fadeout_10{0%{opacity:100%;} 100%{opacity:0%;}} @keyframes text_12{100%{content:"Meet Fred,";top:5%;}} @keyframes fadein_13{0%{opacity:0%;} 100%{opacity:100%;}} @keyframes text_14{100%{content:"my ordinary houseplant...";top:20%;}} @keyframes fadein_15{0%{opacity:0%;} 100%{opacity:100%;}} @keyframes fadeout_17{0%{opacity:100%;} 100%{opacity:0%;}} @keyframes fadeout_18{0%{opacity:100%;} 100%{opacity:0%;}} @keyframes fadeout_19{0%{opacity:100%;} 100%{opacity:0%;}} @keyframes background_20{100%{background:center/cover no-repeat;background-image:url(./pizza/plant-pizza.png)}} @keyframes text_21{100%{content:"Until one day,I noticed something strange...";}} @keyframes fadein_22{0%{opacity:0%;} 100%{opacity:100%;}} .story.container .layer1{animation:background_0 0ms ease-in normal forwards 0ms,fadeout_10 2000ms ease-in normal forwards 10000ms;} .story.container .layer2::before{animation:text_1 0ms ease-in normal forwards 0ms;} .story.container .layer2{animation:fadein_2 2000ms ease-in normal forwards 0ms,fadeout_4 2000ms ease-in normal forwards 3000ms;} .story.container .layer3::before{animation:text_5 0ms ease-in normal forwards 5000ms;} .story.container .layer3{animation:fadein_6 2000ms ease-in normal forwards 5000ms,fadeout_8 2000ms ease-in normal forwards 8000ms;} .story.container .layer4{animation:background_9 0ms ease-in normal forwards 10000ms,fadeout_17 2000ms ease-in normal forwards 20000ms;} .story.container .layer5::before{animation:text_12 0ms ease-in normal forwards 13000ms;} .story.container .layer5{animation:fadein_13 2000ms ease-in normal forwards 13000ms,fadeout_18 0ms ease-in normal forwards 22000ms;} .story.container .layer6::before{animation:text_14 0ms ease-in normal forwards 15000ms;} .story.container .layer6{animation:fadein_15 2000ms ease-in normal forwards 15000ms,fadeout_19 0ms ease-in normal forwards 22000ms;} .story.container .layer7{animation:background_20 0ms ease-in normal forwards 22000ms;} .story.container .layer8::before{animation:text_21 0ms ease-in normal forwards 22000ms;} .story.container .layer8{animation:fadein_22 2000ms ease-in normal forwards 22000ms;}