所有动画的CSS动画重复

我有一个文本动画如下。但是我无法对整个过程应用动画迭代计数。我需要从头开始重复所有动画。从第1帧到第5帧预先感谢您所有动画的CSS动画重复

HTML：

<div class="sp-container"> 
     <div class="sp-content"> 

       <h2 class="frame-1">It's destroying the planet</h2> 

       <h2 class="frame-2">It's mass, mechanized murder</h2> 

       <h2 class="frame-3">You can stop it</h2> 

       <h2 class="frame-4">Now!</h2> 

       <h2 class="frame-5"><span>Save the planet.</span> <span>Love life.</span> <span>Go vegan.</span></h2> 


     </div> 
    </div>

CSS：。

sp-container { 
    position:relative; 
    top: 30px; 
    left: 0px; 
    width: 100%; 
    height: 150px; 
    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.5)); 
    background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.5)); 
    background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.5)); 
    background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.5)); 

} 

.sp-content { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    left: 0px; 
    top: 0px; 
    z-index: 1000; 

} 

.sp-container h2 { 
    position: absolute; 
    top: 50%; 
    line-height: 100px; 
    height: 90px; 
    margin-top: -50px; 
    font-size: 70px; 
    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: 150px; 
    -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; 
    animation-iteration-count:infinite; 
    -webkit-animation-iteration-count:infinite; 
} 

.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; 

} 






/**/ 

@-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); 
    } 
} 




/**/ 

@-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); 
    } 
} 




/**/ 

@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); 
    } 
}

来源

2017-05-29 Nahid Mirzayev

所以你正在做动画广告，对你有好处。只有当他们拥有相同/完美的时机时，才能循环他们，这是难以实现或无法实现的。在上一次动画结束后，您应该使用JS重新开始动画。 –

@DincaAdrian非常感谢你的努力。不幸的是，我不知道JS :(。你能帮忙吗？！ –

你应该使用JS脚本，如下面的一个

<script> 
    // setting the element 
    element = document.getElementById("ad"); 
    // reset animation 
    setInterval(function() { 
    // -> delete class 
    element.classList.remove("animation"); 
    // -> triggering reflow /* The actual magic */ 
    // without this it wouldn't work. Try uncommenting the line and the transition won't be retriggered. 
    element.offsetWidth = element.offsetWidth; 
    // -> add the animation class so the animation is restarted 
    element.classList.add("animation"); 
    }, 7000); 
    // this is the timmer which sums up the total of animation time of elements and delays calculated by you 

</script>

凡广告元素是你的父元素，并且所有动画类 .ad.animation .element{//animation defined here} 的HTML下的定义应该已经下手主要元素定义如下：

<div onclick='window.location.href="http://www.google.com"' id="ad" class="ad animation">

如果您将链接更改为任何你想要的t（自定义或Google广告/其他广告提供商）并立即开始动画。 7000毫秒表示您的动画的总时间，相应地更改。希望这会有所帮助，并会以某种方式提升你：D

来源

2017-05-29 12:30:38

另外，作为一个方面说明，如果你只是乞求动画，一个很好的图书馆是http://lesshat.madebysource.com/（这将需要您学习较少，但这将大大提高您的生产力，因为您可以在第二个问题上定义新的动画）也是一个很好的图书馆，可以帮助您处理浏览器的兼容性 –

非常感谢。但我不能确定我应该在哪里使用这个类**。ad.animation .element {//这里定义的动画} ** –

所以，所有的动画都在* .animation *类下定义，移动所有动画只有当这个类是存在的，现在你明白了这个概念吗？ –

所有动画的CSS动画重复

回答

相关问题