使用Javascript

时间：2016-12-13 10:22:39

标签： javascript css css3 animation 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;
		}
	}
<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 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

使用setTimeout并尝试将animation属性设置为其他内容，然后再次将其设置为classname，以便重新启动动画。

类似的东西：

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

答案 2 :(得分：0)

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

相关问题
最新问题