logo标签列表

使用JavaScript重新启动CSS3动画

javascriptcssanimationcss-transitions
6
我正在创建一个CSS3/HTML5横幅广告，希望在它们全部完成后循环动画。我知道有一种方法可以使用JavaScript检查特定动画是否已结束，但是我无法弄清楚如何从所有起点重新启动动画。
基本上，我有3个不同信息的“框架”，每个框架都将淡入然后淡出，以被下一个框架替换 - 一旦最后一个框架淡出，我希望动画重新开始。仅使用CSS3实现这一点过于棘手，因为每个动画的时间和设置为0的不透明度的点必须不同。
正如您可以从JSFiddle中看到的那样，它播放一次，然后停止，这很棒，现在我只需要在click_through2执行动画后重新触发动画。 JSFiddle 

 .test {
     height: 250px;
     position: relative;
     width: 300px;
     overflow: hidden;
 }
 .test div, .test a, .logo, .sfv2 {
  position: absolute;
 }
 .title {
     bottom: 45px;
     left: 5px;
     right: 5px;
 }
 .title h2 {
     color: #fff;
     font-family: Helvetica,arial,sans-serif;
     font-size: 21px;
     font-weight: 400;
     line-height: 1;
     margin: 0;
     text-align: center;
 }
 .click_through {
     background-color: #fff200;
     border-radius: 5px;
     bottom: 12px;
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.35);
     color: #ce1e25;
     font-family: Helvetica,arial,sans-serif;
     font-size: 14px;
     font-weight: 700;
     left: 0;
     line-height: 1;
     margin: 0 auto;
     padding: 5px;
     right: 0;
     text-align: center;
     width: 70px;
     text-decoration: none;
 }
 .click_through1 {
  animation: tbio 7s ease-out 0s both;
  -moz-animation: tbio 7s ease-out 0s both;
  -webkit-animation: tbio 7s ease-out 0s both;
  -ms-animation: tbio 7s ease-out 0s both;
  -o-animation: tbio 7s ease-out 0s both;
 }
 .click_through2 {
  animation: tbio 7s ease-out 10s both;
  -moz-tbio tbio 7s ease-out 10s both;
  -webkit-tbio tbio 7s ease-out 10s both;
  -ms-tbio tbio 7s ease-out 10s both;
  -o-tbio tbio 7s ease-out 10s both;
  width: 80px;
 }
 .logo {
  top: 8px;
  left: 8px;
 }
 .title1 {
  animation: ltrio 6s ease 0s both;
  -moz-animation: ltrio 6s ease 0s both;
  -webkit-animation: ltrio 6s ease 0s both;
  -ms-animation: ltrio 6s ease 0s both;
  -o-animation: ltrio 6s ease 0s both;
 }
 .title2, .title3 {
  opacity: 0;
 }
 .title2 {
  animation: ltrio 6s ease 5.5s both;
  -moz-animation: ltrio 6s ease 5.5s both;
  -webkit-animation: ltrio 6s ease 5.5s both;
  -ms-animation: ltrio 6s ease 5.5s both;
  -o-animation: ltrio 6s ease 5.5s both;
 }
 .title3 {
  animation: ltrio 6s ease 10s both;
  -moz-nimation: ltrio 6s ease 10s both;
  -webkit-nimation: ltrio 6s ease 10s both;
  -ms-onimation: ltrio 6s ease 10s both;
  -o-nimation: ltrio 6s ease 10s both;
 }
 .sfv2 {
     right: 12px;
     top: 34px;
     animation: fio 6s ease 11s both;
     -moz-animation: fio 6s ease 11s both;
     -webkit-animation: fio 6s ease 11s both;
     -ms-animation: fio 6s ease 11s both;
     -o-animation: fio 6s ease 11s both;
 }
 
 @keyframes ltrio {
  0% {
   opacity: 0;
  }
  20% {
   opacity: 1;
  }
  50% {
   opacity: 1;
  }
  80% {
   opacity: 0;
  }
  100% {
   opacity: 0;
  }
 }
 @-moz-keyframes ltrio {
  0% {
   opacity: 0;
  }
  20% {
   opacity: 1;
  }
  50% {
   opacity: 1;
  }
  80% {
   opacity: 0;
  }
  100% {
   opacity: 0;
  }
 }

 @-ms-keyframes ltrio {
  0% {
   -ms-transform: translateY(-350px);
   opacity: 0;
  }
  25% {
   -ms-transform: translateY(0);
   opacity: 1;
  }
  75% {
   -ms-transform: translateY(0);
   opacity: 1;
  }
  100% {
   -ms-transform: translateY(350px);
   opacity: 0;
  }
 }
 @-o-keyframes ltrio {
  0% {
   -o-transform: translateX(-350px);
   opacity: 0;
  }
  25% {
   -o-transform: translateX(0);
   opacity: 1;
  }
  75% {
   -o-transform: translateX(0);
   opacity: 1;
  }
  100% {
   -o-transform: translateX(350px);
   opacity: 0;
  }
 }
 @keyframes tbio {
  0% {
   transform: translateY(350px);
   opacity: 0;
  }
  25% {
   transform: translateY(0);
   opacity: 1;
  }
  75% {
   transform: translateY(0);
   opacity: 1;
  }
  100% {
   transform: translateY(350px);
   opacity: 0;
  }
 }
 @-moz-keyframes tbio {
  0% {
   -moz-transform: translateY(350px);
   opacity: 0;
  }
  25% {
   -moz-transform: translateY(0);
   opacity: 1;
  }
  75% {
   -moz-transform: translateY(0);
   opacity: 1;
  }
  100% {
   -moz-transform: translateY(350px);
   opacity: 0;
  }
 }
 @-webkit-keyframes tbio {
  0% {
   -webkit-transform: translateY(350px);
   opacity: 0;
  }
  25% {
   -webkit-transform: translateY(0);
   opacity: 1;
  }
  75% {
   -webkit-transform: translateY(0);
   opacity: 1;
  }
  100% {
   -webkit-transform: translateY(350px);
   opacity: 0;
  }
 }
 @-ms-keyframes tbio {
  0% {
   -ms-transform: translateY(350px);
   opacity: 0;
  }
  25% {
   -ms-transform: translateY(0);
   opacity: 1;
  }
  75% {
   -ms-transform: translateY(0);
   opacity: 1;
  }
  100% {
   -ms-transform: translateY(350px);
   opacity: 0;
  }
 }
 @-o-keyframes tbio {
  0% {
   -o-transform: translateY(350px);
   opacity: 0;
  }
  25% {
   -o-transform: translateY(0);
   opacity: 1;
  }
  75% {
   -o-transform: translateY(0);
   opacity: 1;
  }
  100% {
   -o-transform: translateY(350px);
   opacity: 0;
  }
 }
 @keyframes fio {
  0% {
   opacity: 0;
  }
  20% {
   opacity: 1;
  }
  50% {
   opacity: 1;
  }
  80% {
   opacity: 0;
  }
  100% {
   opacity: 0;
  }
 }
<div class="test">
 <img class="sfv1" src="http://i.imgur.com/3VWKopF.jpg">
 <div class="title title1">
  <h2>Great value<br/> <strong>Spanish Properties</strong><br/> starting at £65k</h2>
 </div>
 <div class="title title2">
  <h2>Stunning properties in <br/><strong>Costa del Sol, <br/>Blanca & Murcia</strong></h2>
 </div>
 <div class="title title3">
  <h2>Over <strong>10,000 <br/>Spanish properties sold</strong></h2>
 </div>
 <a class="click_through click_through1" href="/">View here</a>
 <a class="click_through click_through2" href="/">Learn more</a>
</div>

3个回答
2

您可以通过响应 endanimation 事件（有几个 浏览器相关变体）来检查动画的结束，重新加载相关节点并重复整个过程。请注意，我将动画速度乘以10倍，以便您可以更快地看到效果：

// Define a function that listens to all prefix variants of endanimation events:
function whenAnimationEnd(element, callback) {
    element.addEventListener('animationend', callback, false);
    element.addEventListener('webkitAnimationEnd', callback, false);
    element.addEventListener('oanimationend', callback, false);
    element.addEventListener('MSAnimationEnd', callback, false);
}

(function repeat() {
  whenAnimationEnd(document.querySelector('.click_through2'), function(e) {
    var container = document.querySelector('.ad_container');
    var dupe = container.cloneNode(true);
    container.parentNode.replaceChild(dupe, container);
    repeat();
  });
}());
 .ad_container {
     height: 250px;
     position: relative;
     width: 300px;
     overflow: hidden;
 }
 .ad_container div, .ad_container a, .logo, .sfv2 {
  position: absolute;
 }
 .title {
     bottom: 45px;
     left: 5px;
     right: 5px;
 }
 .title h2 {
     color: #fff;
     font-family: Helvetica,arial,sans-serif;
     font-size: 21px;
     font-weight: 400;
     line-height: 1;
     margin: 0;
     text-align: center;
 }
 .click_through {
     background-color: #fff200;
     border-radius: 5px;
     bottom: 12px;
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.35);
     color: #ce1e25;
     font-family: Helvetica,arial,sans-serif;
     font-size: 14px;
     font-weight: 700;
     left: 0;
     line-height: 1;
     margin: 0 auto;
     padding: 5px;
     right: 0;
     text-align: center;
     width: 70px;
     text-decoration: none;
 }
 .click_through1 {
  animation: tbio 0.7s ease-out 0s both;
  -moz-animation: tbio 0.7s ease-out 0s both;
  -webkit-animation: tbio 0.7s ease-out 0s both;
  -ms-animation: tbio 0.7s ease-out 0s both;
  -o-animation: tbio 0.7s ease-out 0s both;
 }
 .click_through2 {
  animation: tbio 0.7s ease-out 1s both;
  -moz-tbio tbio 0.7s ease-out 1s both;
  -webkit-tbio tbio 0.7s ease-out 1s both;
  -ms-tbio tbio 0.7s ease-out 1s both;
  -o-tbio tbio 0.7s ease-out 1s both;
  width: 80px;
 }
 .logo {
  top: 8px;
  left: 8px;
 }
 .title1 {
  animation: ltrio 0.6s ease 0s both;
  -moz-animation: ltrio 0.6s ease 0s both;
  -webkit-animation: ltrio 0.6s ease 0s both;
  -ms-animation: ltrio 0.6s ease 0s both;
  -o-animation: ltrio 0.6s ease 0s both;
 }
 .title2, .title3 {
  opacity: 0;
 }
 .title2 {
  animation: ltrio 0.6s ease 0.55s both;
  -moz-animation: ltrio 0.6s ease 0.55s both;
  -webkit-animation: ltrio 0.6s ease 0.55s both;
  -ms-animation: ltrio 0.6s ease 0.55s both;
  -o-animation: ltrio 0.6s ease 0.55s both;
 }
 .title3 {
  animation: ltrio 0.6s ease 1s both;
  -moz-nimation: ltrio 0.6s ease 1s both;
  -webkit-nimation: ltrio 0.6s ease 1s both;
  -ms-onimation: ltrio 0.6s ease 1s both;
  -o-nimation: ltrio 0.6s ease 1s both;
 }
 .sfv2 {
     right: 12px;
     top: 34px;
     animation: fio 0.6s ease 1.1s both;
     -moz-animation: fio 0.6s ease 1.1s both;
     -webkit-animation: fio 0.6s ease 1.1s both;
     -ms-animation: fio 0.6s ease 1.1s both;
     -o-animation: fio 0.6s ease 1.1s both;
 }
 
 @keyframes ltrio {
  0% {
   opacity: 0;
  }
  20% {
   opacity: 1;
  }
  50% {
   opacity: 1;
  }
  80% {
   opacity: 0;
  }
  100% {
   opacity: 0;
  }
 }
 @-moz-keyframes ltrio {
  0% {
   opacity: 0;
  }
  20% {
   opacity: 1;
  }
  50% {
   opacity: 1;
  }
  80% {
   opacity: 0;
  }
  100% {
   opacity: 0;
  }
 }

 @-ms-keyframes ltrio {
  0% {
   -ms-transform: translateY(-350px);
   opacity: 0;
  }
  25% {
   -ms-transform: translateY(0);
   opacity: 1;
  }
  75% {
   -ms-transform: translateY(0);
   opacity: 1;
  }
  100% {
   -ms-transform: translateY(350px);
   opacity: 0;
  }
 }
 @-o-keyframes ltrio {
  0% {
   -o-transform: translateX(-350px);
   opacity: 0;
  }
  25% {
   -o-transform: translateX(0);
   opacity: 1;
  }
  75% {
   -o-transform: translateX(0);
   opacity: 1;
  }
  100% {
   -o-transform: translateX(350px);
   opacity: 0;
  }
 }
 @keyframes tbio {
  0% {
   transform: translateY(350px);
   opacity: 0;
  }
  25% {
   transform: translateY(0);
   opacity: 1;
  }
  75% {
   transform: translateY(0);
   opacity: 1;
  }
  100% {
   transform: translateY(350px);
   opacity: 0;
  }
 }
 @-moz-keyframes tbio {
  0% {
   -moz-transform: translateY(350px);
   opacity: 0;
  }
  25% {
   -moz-transform: translateY(0);
   opacity: 1;
  }
  75% {
   -moz-transform: translateY(0);
   opacity: 1;
  }
  100% {
   -moz-transform: translateY(350px);
   opacity: 0;
  }
 }
 @-webkit-keyframes tbio {
  0% {
   -webkit-transform: translateY(350px);
   opacity: 0;
  }
  25% {
   -webkit-transform: translateY(0);
   opacity: 1;
  }
  75% {
   -webkit-transform: translateY(0);
   opacity: 1;
  }
  100% {
   -webkit-transform: translateY(350px);
   opacity: 0;
  }
 }
 @-ms-keyframes tbio {
  0% {
   -ms-transform: translateY(350px);
   opacity: 0;
  }
  25% {
   -ms-transform: translateY(0);
   opacity: 1;
  }
  75% {
   -ms-transform: translateY(0);
   opacity: 1;
  }
  100% {
   -ms-transform: translateY(350px);
   opacity: 0;
  }
 }
 @-o-keyframes tbio {
  0% {
   -o-transform: translateY(350px);
   opacity: 0;
  }
  25% {
   -o-transform: translateY(0);
   opacity: 1;
  }
  75% {
   -o-transform: translateY(0);
   opacity: 1;
  }
  100% {
   -o-transform: translateY(350px);
   opacity: 0;
  }
 }
 @keyframes fio {
  0% {
   opacity: 0;
  }
  20% {
   opacity: 1;
  }
  50% {
   opacity: 1;
  }
  80% {
   opacity: 0;
  }
  100% {
   opacity: 0;
  }
 }
<div class="ad_container">
 <img class="sfv1" src="http://i.imgur.com/3VWKopF.jpg">
 <div class="title title1">
  <h2>Great value<br/> <strong>Spanish Properties</strong><br/> starting at £65k</h2>
 </div>
 <div class="title title2">
  <h2>Stunning properties in <br/><strong>Costa del Sol, <br/>Blanca & Murcia</strong></h2>
 </div>
 <div class="title title3">
  <h2>Over <strong>10,000 <br/>Spanish properties sold</strong></h2>
 </div>
 <a class="click_through click_through1" href="/">View here</a>
 <a class="click_through click_through2" href="/">Learn more</a>
</div>

这个几乎完美运行，但它不保持连续循环 - 它只播放动画两次 - https://jsfiddle.net/bpnxemyh/ - Nikki Mather
那个现在已经修复了。 - trincot
完美，运行得非常好！关于如何将前缀加入到您提供的代码中，您有什么想法吗？我尝试过了，但是对Javascript的了解远远不够，没能让它正常工作。谢谢。 - Nikki Mather
我在代码片段中添加了一个处理前缀的函数。 - trincot
2

使用setTimeout函数，尝试将animation属性设置为其他值，然后再次将其设置为类名，以重新启动动画。

类似于以下代码：

setTimeout(function(){
document.querySelector('.someclass').classList.remove("run-animation").classList.add("run-animation");
}, 1000)
OP没有将这个问题标记为jQuery问题。 - Sojtin
1
这需要纯粹使用Javascript或CSS完成，因为广告将显示在一个具有最大文件大小限制的平台上，而jQuery会增加太多的开销。 - Nikki Mather
@NikkiMather 完成了.. 我把答案改成了纯JS。 - Sankalp Singha
我认为这样做行不通。通常情况下，你需要移除该类、终止函数并在一段时间后再次添加它。否则，浏览器将不会重新启动动画。 - vals
0

移除动画所分配的类，并再次添加（可能需要延迟），动画将重新开始。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接