All geek questions in one place

CSS3 animation snooze

I have a series of words animation using css3. Background images of the globe and a stylized link follow these words and are also animated in css3. My final addition is a more or less button. I want them to follow this example and appear / come to life after or at the same time as the stylized link. If anyone can suggest code to be added to my #more, #less section css3 would be a big help. Thanks, the code is below.

#more, #less { background:none; border:none; color:#FFF; font-family:Verdana, Geneva, sans-serif; cursor: pointer; } .fb-like { float:left; } h1.main,p.demos { -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .sp-container { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 0; background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); } .sp-content { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; z-index: 5; } .sp-container h2 { position: absolute; top: 50%; line-height: 100px; height: 100px; margin-top: -50px; font-size: 100px; width: 100%; text-align: center; color: transparent; -webkit-animation: blurFadeInOut 3s ease-in backwards; -moz-animation: blurFadeInOut 3s ease-in backwards; -ms-animation: blurFadeInOut 3s ease-in backwards; animation: blurFadeInOut 3s ease-in backwards; } .sp-container h2.frame-1 { -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; } .sp-container h2.frame-2 { -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -ms-animation-delay: 3s; animation-delay: 3s; } .sp-container h2.frame-3 { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .sp-container h2.frame-4 { font-size: 200px; -webkit-animation-delay: 9s; -moz-animation-delay: 9s; -ms-animation-delay: 9s; animation-delay: 9s; } .sp-container h2.frame-5 { -webkit-animation: none; -moz-animation: none; -ms-animation: none; animation: none; color: transparent; text-shadow: 0px 0px 1px #fff; } .sp-container h2.frame-5 span { -webkit-animation: blurFadeIn 3s ease-in 12s backwards; -moz-animation: blurFadeIn 1s ease-in 12s backwards; -ms-animation: blurFadeIn 3s ease-in 12s backwards; animation: blurFadeIn 3s ease-in 12s backwards; color: transparent; text-shadow: 0px 0px 1px #fff; } .sp-container h2.frame-5 span:nth-child(2) { -webkit-animation-delay: 13s; -moz-animation-delay: 13s; -ms-animation-delay: 13s; animation-delay: 13s; } .sp-container h2.frame-5 span:nth-child(3) { -webkit-animation-delay: 14s; -moz-animation-delay: 14s; -ms-animation-delay: 14s; animation-delay: 14s; } .sp-globe { position: absolute; width: 282px; height: 273px; left: 50%; top: 50%; margin: -137px 0 0 -141px; background: transparent url(images/globe.png) no-repeat top left; -webkit-animation: fadeInBack 3.6s linear 14s backwards; -moz-animation: fadeInBack 3.6s linear 14s backwards; -ms-animation: fadeInBack 3.6s linear 14s backwards; animation: fadeInBack 3.6s linear 14s backwards; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); opacity: 0.3; -webkit-transform: scale(5); -moz-transform: scale(5); -o-transform: scale(5); -ms-transform: scale(5); transform: scale(5); } .sp-circle-link { position: absolute; left: 50%; bottom: 120px; margin-left: -50px; text-align: center; width: 100px; height: 100px; background: #666; color: #FFF; font-size: 20px; font-weight:bolder; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-animation: fadeInRotate 1s linear 16s backwards; -moz-animation: fadeInRotate 1s linear 16s backwards; -ms-animation: fadeInRotate 1s linear 16s backwards; animation: fadeInRotate 1s linear 16s backwards; -webkit-transform: scale(1) rotate(0deg); -moz-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } .sp-circle-link:hover { background: #333; color: #FC0; text-shadow:none; } #find { padding-top:25%; } /**/ @-webkit-keyframes blurFadeInOut{ 0%{ opacity: 0; text-shadow: 0px 0px 40px #fff; -webkit-transform: scale(1.3); } 20%,75%{ opacity: 1; text-shadow: 0px 0px 1px #fff; -webkit-transform: scale(1); } 100%{ opacity: 0; text-shadow: 0px 0px 50px #fff; -webkit-transform: scale(0); } } @-webkit-keyframes blurFadeIn{ 0%{ opacity: 0; text-shadow: 0px 0px 40px #fff; -webkit-transform: scale(1.3); } 50%{ opacity: 0.5; text-shadow: 0px 0px 10px #fff; -webkit-transform: scale(1.1); } 100%{ opacity: 1; text-shadow: 0px 0px 1px #fff; -webkit-transform: scale(1); } } @-webkit-keyframes fadeInBack{ 0%{ opacity: 0; -webkit-transform: scale(0); } 50%{ opacity: 0.4; -webkit-transform: scale(2); } 100%{ opacity: 0.2; -webkit-transform: scale(5); } } @-webkit-keyframes fadeInRotate{ 0%{ opacity: 0; -webkit-transform: scale(0) rotate(360deg); } 100%{ opacity: 1; -webkit-transform: scale(1) rotate(0deg); } } /**/ @-moz-keyframes blurFadeInOut{ 0%{ opacity: 0; text-shadow: 0px 0px 40px #fff; -moz-transform: scale(1.3); } 20%,75%{ opacity: 1; text-shadow: 0px 0px 1px #fff; -moz-transform: scale(1); } 100%{ opacity: 0; text-shadow: 0px 0px 50px #fff; -moz-transform: scale(0); } } @-moz-keyframes blurFadeIn{ 0%{ opacity: 0; text-shadow: 0px 0px 40px #fff; -moz-transform: scale(1.3); } 100%{ opacity: 1; text-shadow: 0px 0px 1px #fff; -moz-transform: scale(1); } } @-moz-keyframes fadeInBack{ 0%{ opacity: 0; -moz-transform: scale(0); } 50%{ opacity: 0.4; -moz-transform: scale(2); } 100%{ opacity: 0.2; -moz-transform: scale(5); } } @-moz-keyframes fadeInRotate{ 0%{ opacity: 0; -moz-transform: scale(0) rotate(360deg); } 100%{ opacity: 1; -moz-transform: scale(1) rotate(0deg); } } /**/ @keyframes blurFadeInOut{ 0%{ opacity: 0; text-shadow: 0px 0px 40px #fff; transform: scale(1.3); } 20%,75%{ opacity: 1; text-shadow: 0px 0px 1px #fff; transform: scale(1); } 100%{ opacity: 0; text-shadow: 0px 0px 50px #fff; transform: scale(0); } } @keyframes blurFadeIn{ 0%{ opacity: 0; text-shadow: 0px 0px 40px #fff; transform: scale(1.3); } 50%{ opacity: 0.5; text-shadow: 0px 0px 10px #fff; transform: scale(1.1); } 100%{ opacity: 1; text-shadow: 0px 0px 1px #fff; transform: scale(1); } } @keyframes fadeInBack{ 0%{ opacity: 0; transform: scale(0); } 50%{ opacity: 0.4; transform: scale(2); } 100%{ opacity: 0.2; transform: scale(5); } } @keyframes fadeInRotate{ 0%{ opacity: 0; transform: scale(0) rotate(360deg); } 100%{ opacity: 1; transform: scale(1) rotate(0deg); } }
+6
source share
1 answer

The easiest way I can come up with is to calculate how many seconds it takes for your stylized link in your animation, and then set the delay to animate the buttons more or less using the transition delay property (or if you use keyframes of the delay animation property ). Thus, the animation for them will not start until your stylized link is animated, or they are animated, since animation-style animations are turned on.

+5
source

Source: https://habr.com/ru/post/905334/

More articles:


All Articles