6

I'm creating a CSS3/HTML5 banner ad and want to loop the animations over once they're all complete. I know there's a method to check with Javascript to check if a particular animation has ended, however I cannot figure out how to then restart the animations from all of their start points.

Essentially I have 3 'frames' with different information, each one will fade in and then fade back out, to be replaced with the next frame - once the last frame has faded back out, I want the animations to start over again. Doing this solely with CSS3 is way too tricky, because the timings of the animations and points in which the opacity is set to 0 have to be different for each animation.

As you can see from the JSFiddle, it plays once, then stops which is great, now I just need to re-trigger the animation once click_through2 finishes executing the animation.

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>

Improve this question

3 Answers 3

Reset to default
2

You could check for the end of the animation by responding to the endanimation event (of which there are several browser-dependent variants), reloading the relevant nodes, and repeating the whole process. Note I applied a factor 10 to the speed of the animations so you can see the effect faster:

// 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>

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

This works almost perfectly, however it doesn't stay in a continuous loop - it only plays the animation twice - jsfiddle.net/bpnxemyh
That is fixed now.
Perfect, works great! Any ideas on incorporating the prefixes to the code you supplied? I had a go, but don't know nearly enough about Javascript to get it to work properly. Thanks.
I added a function in the snippet for dealing with the prefixes.
2

Use a setTimeout and try setting the animation property to something else and then set it to the classname again so that it restarts the animation.

Something like: 

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

4 Comments

OP doesn't tag this question as jQuery question.
This needs to be done purely with Javascript or CSS, since the advertisement will be displayed on a platform that has a max filesize and jQuery adds too much of a overhead.
@NikkiMather Done.. I changed the answer to pure JS.
I don't think this will work. Usually you need to remove the class, terminate the function, and on a timeout add it again. Otherwise, the browser will not restart the animation.
0

Remove the class to which the animation is assigned to and add it again (maybe with timeout) and the animation starts again.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.