使用 Javascript 重新启动 CSS3 动画

【问题标题】：Restart CSS3 animation using Javascript使用 Javascript 重新启动 CSS3 动画
【发布时间】：2017-04-28 08:55:27
【问题描述】：

我正在创建一个 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>

【问题讨论】：

    标签： javascript css animation css-transitions


    【解决方案1】：

    删除分配动画的类并再次添加（可能超时），动画再次开始。

    【讨论】：

      【解决方案2】：

      您可以通过响应endanimation事件（其中有几个browser-dependent variants），重新加载相关节点并重复整个过程来检查动画是否结束。请注意，我将动画速度应用了 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>

      【讨论】：

      • 这几乎可以完美运行，但是它不会保持连续循环 - 它只会播放两次动画 - jsfiddle.net/bpnxemyh
      • 现在已修复。
      • 完美，效果很好！关于将前缀合并到您提供的代码中的任何想法？我试了一下，但对 Javascript 的了解还不够多，无法使其正常工作。谢谢。
      • 我在 sn-p 中添加了一个处理前缀的函数。
      【解决方案3】：

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

      类似：

      setTimeout(function(){
document.querySelector('.someclass').classList.remove("run-animation").classList.add("run-animation");
}, 1000)

      【讨论】：

      • OP 不会将此问题标记为jQuery 问题。
      • 这需要纯粹使用 Javascript 或 CSS 来完成，因为广告将显示在具有最大文件大小的平台上，而 jQuery 会增加太多开销。
      • @NikkiMather Done.. 我把答案改成了纯 JS。
      • 我认为这行不通。通常您需要删除该类，终止该功能，并在超时时再次添加它。否则浏览器不会重启动画。
      猜你喜欢
      • 2013-01-06
      • 1970-01-01
      • 1970-01-01
      • 2012-01-31
      • 2012-08-20
      • 2016-08-20
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode