那些遇到过的问题

使用Javascript重新启动CSS3动画

Nik*_*her 5 javascript css animation css3 css-transitions

我在创建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;
		}
	}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

tri*_*cot 2

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

\n\n

\r\n
\r\n
// Define a function that listens to all prefix variants of endanimation events:\r\nfunction whenAnimationEnd(element, callback) {\r\n    element.addEventListener(\'animationend\', callback, false);\r\n    element.addEventListener(\'webkitAnimationEnd\', callback, false);\r\n    element.addEventListener(\'oanimationend\', callback, false);\r\n    element.addEventListener(\'MSAnimationEnd\', callback, false);\r\n}\r\n\r\n(function repeat() {\r\n  whenAnimationEnd(document.querySelector(\'.click_through2\'), function(e) {\r\n    var container = document.querySelector(\'.ad_container\');\r\n    var dupe = container.cloneNode(true);\r\n    container.parentNode.replaceChild(dupe, container);\r\n    repeat();\r\n  });\r\n}());
Run Code Online (Sandbox Code Playgroud)\r\n
\t.ad_container {\r\n\t    height: 250px;\r\n\t    position: relative;\r\n\t    width: 300px;\r\n\t    overflow: hidden;\r\n\t}\r\n\t.ad_container div, .ad_container a, .logo, .sfv2 {\r\n\t\tposition: absolute;\r\n\t}\r\n\t.title {\r\n\t    bottom: 45px;\r\n\t    left: 5px;\r\n\t    right: 5px;\r\n\t}\r\n\t.title h2 {\r\n\t    color: #fff;\r\n\t    font-family: Helvetica,arial,sans-serif;\r\n\t    font-size: 21px;\r\n\t    font-weight: 400;\r\n\t    line-height: 1;\r\n\t    margin: 0;\r\n\t    text-align: center;\r\n\t}\r\n\t.click_through {\r\n\t    background-color: #fff200;\r\n\t    border-radius: 5px;\r\n\t    bottom: 12px;\r\n\t    box-shadow: 0 0 15px rgba(0, 0, 0, 0.35);\r\n\t    color: #ce1e25;\r\n\t    font-family: Helvetica,arial,sans-serif;\r\n\t    font-size: 14px;\r\n\t    font-weight: 700;\r\n\t    left: 0;\r\n\t    line-height: 1;\r\n\t    margin: 0 auto;\r\n\t    padding: 5px;\r\n\t    right: 0;\r\n\t    text-align: center;\r\n\t    width: 70px;\r\n\t    text-decoration: none;\r\n\t}\r\n\t.click_through1 {\r\n\t\tanimation: tbio 0.7s ease-out 0s both;\r\n\t\t-moz-animation: tbio 0.7s ease-out 0s both;\r\n\t\t-webkit-animation: tbio 0.7s ease-out 0s both;\r\n\t\t-ms-animation: tbio 0.7s ease-out 0s both;\r\n\t\t-o-animation: tbio 0.7s ease-out 0s both;\r\n\t}\r\n\t.click_through2 {\r\n\t\tanimation: tbio 0.7s ease-out 1s both;\r\n\t\t-moz-tbio tbio 0.7s ease-out 1s both;\r\n\t\t-webkit-tbio tbio 0.7s ease-out 1s both;\r\n\t\t-ms-tbio tbio 0.7s ease-out 1s both;\r\n\t\t-o-tbio tbio 0.7s ease-out 1s both;\r\n\t\twidth: 80px;\r\n\t}\r\n\t.logo {\r\n\t\ttop: 8px;\r\n\t\tleft: 8px;\r\n\t}\r\n\t.title1 {\r\n\t\tanimation: ltrio 0.6s ease 0s both;\r\n\t\t-moz-animation: ltrio 0.6s ease 0s both;\r\n\t\t-webkit-animation: ltrio 0.6s ease 0s both;\r\n\t\t-ms-animation: ltrio 0.6s ease 0s both;\r\n\t\t-o-animation: ltrio 0.6s ease 0s both;\r\n\t}\r\n\t.title2, .title3 {\r\n\t\topacity: 0;\r\n\t}\r\n\t.title2 {\r\n\t\tanimation: ltrio 0.6s ease 0.55s both;\r\n\t\t-moz-animation: ltrio 0.6s ease 0.55s both;\r\n\t\t-webkit-animation: ltrio 0.6s ease 0.55s both;\r\n\t\t-ms-animation: ltrio 0.6s ease 0.55s both;\r\n\t\t-o-animation: ltrio 0.6s ease 0.55s both;\r\n\t}\r\n\t.title3 {\r\n\t\tanimation: ltrio 0.6s ease 1s both;\r\n\t\t-moz-nimation: ltrio 0.6s ease 1s both;\r\n\t\t-webkit-nimation: ltrio 0.6s ease 1s both;\r\n\t\t-ms-onimation: ltrio 0.6s ease 1s both;\r\n\t\t-o-nimation: ltrio 0.6s ease 1s both;\r\n\t}\r\n\t.sfv2 {\r\n\t    right: 12px;\r\n\t    top: 34px;\r\n\t    animation: fio 0.6s ease 1.1s both;\r\n\t    -moz-animation: fio 0.6s ease 1.1s both;\r\n\t    -webkit-animation: fio 0.6s ease 1.1s both;\r\n\t    -ms-animation: fio 0.6s ease 1.1s both;\r\n\t    -o-animation: fio 0.6s ease 1.1s both;\r\n\t}\r\n\t\r\n\t@keyframes ltrio {\r\n\t\t0% {\r\n\t\t\topacity: 0;\r\n\t\t}\r\n\t\t20% {\r\n\t\t\topacity: 1;\r\n\t\t}\r\n\t\t50% {\r\n\t\t\topacity: 1;\r\n\t\t}\r\n\t\t80% {\r\n\t\t\topacity: 0;\r\n\t\t}\r\n\t\t100% {\r\n\t\t\topacity: 0;\r\n\t\t}\r\n\t}\r\n\t@-moz-keyframes ltrio {\r\n\t\t0% {\r\n\t\t\topacity: 0;\r\n\t\t}\r\n\t\t20% {\r\n\t\t\topacity: 1;\r\n\t\t}\r\n\t\t50% {\r\n\t\t\topacity: 1;\r\n\t\t}\r\n\t\t80% {\r\n\t\t\topacity: 0;\r\n\t\t}\r\n\t\t100% {\r\n\t\t\topacity: 0;\r\n\t\t}\r\n\t}\r\n\r\n\t@-ms-keyframes ltrio {\r\n\t\t0% {\r\n\t\t\t-ms-transform: translateY(-350px);\r\n\t\t\topacity: 0;\r\n\t\t}\r\n\t\t25% {\r\n\t\t\t-ms-transform: translateY(0);\r\n\t\t\topacity: 1;\r\n\t\t}\r\n\t\t75% {\r\n\t\t\t-ms-transform: translateY(0);\r\n\t\t\topacity: 1;\r\n\t\t}\r\n\t\t100% {\r\n\t\t\t-ms-transform: translateY(350px);\r\n\t\t\topacity: 0;\r\n\t\t}\r\n\t}\r\n\t@-o-keyframes ltrio {\r\n\t\t0% {\r\n\t\t\t-o-transform: translateX(-350px);\r\n\t\t\topacity: 0;\r\n\t\t}\r\n\t\t25% {\r\n\t\t\t-o-transform: translateX(0);\r\n\t\t\topacity: 1;\r\n\t\t}\r\n\t\t75% {\r\n\t\t\t-o-transform: translateX(0);\r\n\t\t\topacity: 1;\r\n\t\t}\r\n\t\t100% {\r\n\t\t\t-o-transform: translateX(350px);\r\n\t\t\topacity: 0;\r\n\t\t}\r\n\t}\r\n\t@keyframes tbio {\r\n\t\t0% {\r\n\t\t\ttransform: translateY(350px);\r\n\t\t\topacity: 0;\r\n\t\t}\r\n\t\t25% {\r\n\t\t\ttransform: translateY(0);\r\n\t\t\topacity: 1;\r\n\t\t}\r\n\t\t75% {\r\n\t\t\ttransform: translateY(0);\r\n\t\t\topacity: 1;\r\n\t\t}\r\n\t\t100% {\r\n\t\t\ttransform: translateY(350px);\r\n\t\t\topacity: 0;\r\n\t\t}\r\n\t}\r\n\t@-moz-keyframes tbio {\r\n\t\t0% {\r\n\t\t\t-moz-transform: translateY(350px);\r\n\t\t\topacity: 0;\r\n\t\t}\r\n\t\t25% {\r\n\t\t\t-moz-transform: translateY(0);\r\n\t\t\topacity: 1;\r\n\t\t}\r\n\t\t75% {\r\n\t\t\t-moz-transform: translateY(0);\r\n\t\t\topacity: 1;\r\n\t\t}\r\n\t\t100% {\r\n\t\t\t-moz-transform: translateY(350px);\r\n\t\t\topacity: 0;\r\n\t\t}\r\n\t}\r\n\t@-webkit-keyframes tbio {\r\n\t\t0% {\r\n\t\t\t-webkit-transform: translateY(350px);\r\n\t\t\topacity: 0;\r\n\t\t}\r\n\t\t25% {\r\n\t\t\t-webkit-transform: translateY(0);\r\n\t\t\topacity: 1;\r\n\t\t}\r\n\t\t75% {\r\n\t\t\t-webkit-transform: translateY(0);\r\n\t\t\topacity: 1;\r\n\t\t}\r\n\t\t100% {\r\n\t\t\t-webkit-transform: translateY(350px);\r\n\t\t\topacity: 0;\r\n\t\t}\r\n\t}\r\n\t@-ms-keyframes tbio {\r\n\t\t0% {\r\n\t\t\t-ms-transform: translateY(350px);\r\n\t\t\topacity: 0;\r\n\t\t}\r\n\t\t25% {\r\n\t\t\t-ms-transform: translateY(0);\r\n\t\t\topacity: 1;\r\n\t\t}\r\n\t\t75% {\r\n\t\t\t-ms-transform: translateY(0);\r\n\t\t\topacity: 1;\r\n\t\t}\r\n\t\t100% {\r\n\t\t\t-ms-transform: translateY(350px);\r\n\t\t\topacity: 0;\r\n\t\t}\r\n\t}\r\n\t@-o-keyframes tbio {\r\n\t\t0% {\r\n\t\t\t-o-transform: translateY(350px);\r\n\t\t\topacity: 0;\r\n\t\t}\r\n\t\t25% {\r\n\t\t\t-o-transform: translateY(0);\r\n\t\t\topacity: 1;\r\n\t\t}\r\n\t\t75% {\r\n\t\t\t-o-transform: translateY(0);\r\n\t\t\topacity: 1;\r\n\t\t}\r\n\t\t100% {\r\n\t\t\t-o-transform: translateY(350px);\r\n\t\t\topacity: 0;\r\n\t\t}\r\n\t}\r\n\t@keyframes fio {\r\n\t\t0% {\r\n\t\t\topacity: 0;\r\n\t\t}\r\n\t\t20% {\r\n\t\t\topacity: 1;\r\n\t\t}\r\n\t\t50% {\r\n\t\t\topacity: 1;\r\n\t\t}\r\n\t\t80% {\r\n\t\t\topacity: 0;\r\n\t\t}\r\n\t\t100% {\r\n\t\t\topacity: 0;\r\n\t\t}\r\n\t}
Run Code Online (Sandbox Code Playgroud)\r\n
<div class="ad_container">\r\n\t<img class="sfv1" src="http://i.imgur.com/3VWKopF.jpg">\r\n\t<div class="title title1">\r\n\t\t<h2>Great value<br/> <strong>Spanish Properties</strong><br/> starting at \xc2\xa365k</h2>\r\n\t</div>\r\n\t<div class="title title2">\r\n\t\t<h2>Stunning properties in <br/><strong>Costa del Sol, <br/>Blanca & Murcia</strong></h2>\r\n\t</div>\r\n\t<div class="title title3">\r\n\t\t<h2>Over <strong>10,000 <br/>Spanish properties sold</strong></h2>\r\n\t</div>\r\n\t<a class="click_through click_through1" href="/">View here</a>\r\n\t<a class="click_through click_through2" href="/">Learn more</a>\r\n</div>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n

归档时间：

查看次数：

488 次

最近记录：

8 年，11 月 前
相关归档
阻止下载HTML5视频(右键单击保存)？ 156
如何防止"play()请求被暂停()调用中断"错误？ 102
execCommand() 现在已过时，有什么替代方法？ 83
使用css在img标签上的渐变 17
如何拉伸flex儿童填充容器的高度？ 13
如何用CSS创建实心彩虹边框？ 7
<hr>指向下方之间的箭头 4
用不同的颜色动画一条线 3
将HTML标记添加到materialize.css工具提示 3
jQuery将屏幕加载到纯JavaScript中 -1
难疑归档
如何检查jQuery中是否隐藏了一个元素？ 7481
如何使用正则表达式验证电子邮件地址？ 3201
如何用JavaScript更改元素的类？ 2650
如何在Windows上安装pip？ 2469
如何检测元素外部的单击？ 2367
在Python中获取列表的最后一个元素 1871
如何退出PostgreSQL命令行实用程序:psql 1770
使用jQuery获取当前URL？ 1761
你什么时候使用git rebase而不是git merge？ 1461
如何将命令行参数传递给rake任务 1065