@keyframes background_0{100%{background:center/cover no-repeat;background-image:url(./dubrovnik.jpeg)}} @keyframes background_1{100%{background:center/cover no-repeat;background-image:linear-gradient(115deg,#62cff4,#2c67f2)}} @keyframes fadeout_2{0%{opacity:100%;} 100%{opacity:0%;}} @keyframes text_3{100%{content:"Hi there,";top:40%;left:25%;text-align:left;font-size:5vw;text-shadow:#069 0 0 0.5cm;}} @keyframes fadein_4{0%{opacity:0%;} 100%{opacity:100%;}} @keyframes fadeout_6{0%{opacity:100%;} 100%{opacity:0%;}} @keyframes text_7{100%{content:"Welcome to";top:25%;left:unset;display:block;text-align:center;}} @keyframes fadeout_14{0%{opacity:100%;} 100%{opacity:0%;}} @keyframes transform_15{100%{transform:rotateX(12deg) scale(1.8)}} @keyframes textglow_16{0%,100%{text-shadow:#069 0 0 0.5cm} 35%{text-shadow:#ff0 0 0 0.5cm}} @keyframes fadein_17{0%{opacity:0%;} 100%{opacity:100%;}} @keyframes fadeout_19{0%{opacity:100%;} 100%{opacity:0%;}} @keyframes text_20{100%{content:"Storyboard";font-size:10vw;text-align:center}} @keyframes fadein_21{0%{opacity:0%;} 100%{opacity:100%;}} .story.container .layer1{animation:background_0 0ms ease-in normal forwards 0ms,transform_15 20000ms ease-in-out normal forwards 6500ms;} .story.container .layer2{animation:background_1 0ms ease-in normal forwards 0ms,fadeout_14 2000ms ease-in normal forwards 4500ms;} .story.container .layer3{animation:fadeout_2 0ms ease-in normal forwards 0ms,fadein_4 2000ms ease-in normal forwards 0ms,fadeout_6 500ms ease-in normal forwards 3000ms,fadein_17 2000ms ease-in normal forwards 3500ms,fadeout_19 500ms ease-in normal forwards 6500ms,fadein_21 3000ms ease-in normal forwards 7000ms;} .story.container .layer3::before{animation:text_3 0ms ease-in normal forwards 0ms,text_7 0ms ease-in normal forwards 3500ms,textglow_16 2000ms ease-in normal forwards 26500ms,text_20 0ms ease-in normal forwards 7000ms;}