Mozilla has published details on how to utilize event listeners with CSS animations in a concise example on their developer site. However, while the majority of the code demos - not written examples - they use on their page work also in Chrome and Safari, the event listener demo noticeably does not. In order to fill that gap, I've adapted the code to work on Chrome and Safari.
It doesn't take much to change, it is simply a case of changing both instances of "animationstart" to "webkitAnimationStart", and adding the same prefix, i.e. webkit, and capitalisation, i.e. camelCase, to the elements "animationend" and "animationiteration", which also both appear twice in the code.
Further details on using event listeners and CSS animations in Safari (and Chrome) browsers can be found on the Apple Developer Site.
If you would like the code to work in Firefox, Chrome and Safari then we need to combine both versions like this:
<!doctype html>
<html>
<head>
<title>CSS animations: Animation events</title>
<style type="text/css">
.slidein { -moz-animation-duration: 3s; -webkit-animation-duration: 3s; -moz-animation-name: slidein; -webkit-animation-name: slidein; -moz-animation-iteration-count: 3; -webkit-animation-iteration-count: 3; -moz-animation-direction: alternate; -webkit-animation-direction: alternate; }
@-moz-keyframes slidein { from { margin-left:100%; width:300% } to { margin-left:0%; width:100%; } }
@-webkit-keyframes slidein { from { margin-left:100%; width:300% } to { margin-left:0%; width:100%; } }
</style>
<script>
var listener = function(e) {
var l = document.createElement("li"); switch(e.type)
{ case "webkitAnimationStart": l.innerHTML = "Started: elapsed time is " + e.elapsedTime; break; case "webkitAnimationEnd": l.innerHTML = "Ended: elapsed time is " + e.elapsedTime; break; case "webkitAnimationIteration": l.innerHTML = "New loop started at time " + e.elapsedTime; break;
}
document.getElementById("output").appendChild(l);
}
var setup = function() {
var e = document.getElementById("watchme"); e.addEventListener("webkitAnimationStart", listener, false); e.addEventListener("webkitAnimationEnd", listener, false); e.addEventListener("webkitAnimationIteration", listener, false); e.className = 'slidein';
}
</script>
</head>
<body onload="setup()">
<h1 id="watchme">Watch me move</h1> <p>This example shows how to use CSS animations to make <code>H1</code> elements move across the page.</p> <p>In addition, we output some text each time an animation event fires, so you can see them in action.</p> <ul id="output"> </ul>
</body>
</html>
<html>
<head>
<title>CSS animations: Animation events</title>
<style type="text/css">
.slidein { -moz-animation-duration: 3s; -webkit-animation-duration: 3s; -moz-animation-name: slidein; -webkit-animation-name: slidein; -moz-animation-iteration-count: 3; -webkit-animation-iteration-count: 3; -moz-animation-direction: alternate; -webkit-animation-direction: alternate; }
@-moz-keyframes slidein { from { margin-left:100%; width:300% } to { margin-left:0%; width:100%; } }
@-webkit-keyframes slidein { from { margin-left:100%; width:300% } to { margin-left:0%; width:100%; } }
</style>
<script>
var listener = function(e) {
var l = document.createElement("li"); switch(e.type)
{ case "webkitAnimationStart": l.innerHTML = "Started: elapsed time is " + e.elapsedTime; break; case "webkitAnimationEnd": l.innerHTML = "Ended: elapsed time is " + e.elapsedTime; break; case "webkitAnimationIteration": l.innerHTML = "New loop started at time " + e.elapsedTime; break;
}
document.getElementById("output").appendChild(l);
}
var setup = function() {
var e = document.getElementById("watchme"); e.addEventListener("webkitAnimationStart", listener, false); e.addEventListener("webkitAnimationEnd", listener, false); e.addEventListener("webkitAnimationIteration", listener, false); e.className = 'slidein';
}
</script>
</head>
<body onload="setup()">
<h1 id="watchme">Watch me move</h1> <p>This example shows how to use CSS animations to make <code>H1</code> elements move across the page.</p> <p>In addition, we output some text each time an animation event fires, so you can see them in action.</p> <ul id="output"> </ul>
</body>
</html>
It doesn't take much to change, it is simply a case of changing both instances of "animationstart" to "webkitAnimationStart", and adding the same prefix, i.e. webkit, and capitalisation, i.e. camelCase, to the elements "animationend" and "animationiteration", which also both appear twice in the code.
Further details on using event listeners and CSS animations in Safari (and Chrome) browsers can be found on the Apple Developer Site.
If you would like the code to work in Firefox, Chrome and Safari then we need to combine both versions like this:
<!doctype html>
<html>
<head>
<title>CSS animations: Animation events</title>
<style type="text/css">
.slidein { -moz-animation-duration: 3s; -webkit-animation-duration: 3s; -moz-animation-name: slidein; -webkit-animation-name: slidein; -moz-animation-iteration-count: 3; -webkit-animation-iteration-count: 3; -moz-animation-direction: alternate; -webkit-animation-direction: alternate; }
@-moz-keyframes slidein { from { margin-left:100%; width:300% } to { margin-left:0%; width:100%; } }
@-webkit-keyframes slidein { from { margin-left:100%; width:300% } to { margin-left:0%; width:100%; } }
</style>
<script>
var listener = function(e) { var l = document.createElement("li"); switch(e.type) { case "webkitAnimationStart": l.innerHTML = "Started: elapsed time is " + e.elapsedTime; break; case "animationstart": l.innerHTML = "Started: elapsed time is " + e.elapsedTime; break; case "webkitAnimationEnd": l.innerHTML = "Ended: elapsed time is " + e.elapsedTime; break; case "animationend": l.innerHTML = "Ended: elapsed time is " + e.elapsedTime; break; case "webkitAnimationIteration": l.innerHTML = "New loop started at time " + e.elapsedTime; break; case "animationiteration": l.innerHTML = "New loop started at time " + e.elapsedTime; break; } document.getElementById("output").appendChild(l); } var setup = function() { var e = document.getElementById("watchme"); e.addEventListener("webkitAnimationStart", listener, false); e.addEventListener("animationstart", listener, false); e.addEventListener("webkitAnimationEnd", listener, false); e.addEventListener("animationend", listener, false); e.addEventListener("webkitAnimationIteration", listener, false); e.addEventListener("animationiteration", listener, false); e.className = 'slidein'; }
</script>
</head>
<body onload="setup()">
<h1 id="watchme">Watch me move</h1>
<p>This example shows how to use CSS animations to make <code>H1</code> elements move across the page.</p>
<p>In addition, we output some text each time an animation event fires, so you can see them in action.</p> <ul id="output"> </ul>
</body>
</html>
<html>
<head>
<title>CSS animations: Animation events</title>
<style type="text/css">
.slidein { -moz-animation-duration: 3s; -webkit-animation-duration: 3s; -moz-animation-name: slidein; -webkit-animation-name: slidein; -moz-animation-iteration-count: 3; -webkit-animation-iteration-count: 3; -moz-animation-direction: alternate; -webkit-animation-direction: alternate; }
@-moz-keyframes slidein { from { margin-left:100%; width:300% } to { margin-left:0%; width:100%; } }
@-webkit-keyframes slidein { from { margin-left:100%; width:300% } to { margin-left:0%; width:100%; } }
</style>
<script>
var listener = function(e) { var l = document.createElement("li"); switch(e.type) { case "webkitAnimationStart": l.innerHTML = "Started: elapsed time is " + e.elapsedTime; break; case "animationstart": l.innerHTML = "Started: elapsed time is " + e.elapsedTime; break; case "webkitAnimationEnd": l.innerHTML = "Ended: elapsed time is " + e.elapsedTime; break; case "animationend": l.innerHTML = "Ended: elapsed time is " + e.elapsedTime; break; case "webkitAnimationIteration": l.innerHTML = "New loop started at time " + e.elapsedTime; break; case "animationiteration": l.innerHTML = "New loop started at time " + e.elapsedTime; break; } document.getElementById("output").appendChild(l); } var setup = function() { var e = document.getElementById("watchme"); e.addEventListener("webkitAnimationStart", listener, false); e.addEventListener("animationstart", listener, false); e.addEventListener("webkitAnimationEnd", listener, false); e.addEventListener("animationend", listener, false); e.addEventListener("webkitAnimationIteration", listener, false); e.addEventListener("animationiteration", listener, false); e.className = 'slidein'; }
</script>
</head>
<body onload="setup()">
<h1 id="watchme">Watch me move</h1>
<p>This example shows how to use CSS animations to make <code>H1</code> elements move across the page.</p>
<p>In addition, we output some text each time an animation event fires, so you can see them in action.</p> <ul id="output"> </ul>
</body>
</html>
Amazing stuff,Thanks so much for this!This is very useful post for me. This will absolutely going to help me in my projects .
ReplyDelete----------------------------------------------------------
Flower Girl Dresses|Empire Wedding Dresses|Column Wedding Dresses
Your blog is very beneficial for every reader including me. Keep doing the great work so that people like me can learn some nice and new things. I would love to read more posts on your site.Franchises UK
ReplyDelete