HTML Event attribute: aminationend
[this page | pdf | back links]
The HTML aminationend attribute specifies the event
that is triggered when a CSS animation
ends. It applies to HTML elements that have CSS animatable elements. It seems
to be necessary to set it using JavaScript.
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
div {width: 100px; height: 30px; position: relative;
background: yellow;}
div.c1 {animation: anim 2s 2}
@keyframes anim {from {left: 0px} to {left: 50px;} }
</style>
</head>
<body>
<div class="c1" id="x2"> </div><br>
<p id="x1"></p>
<br><br>
<script>
var x = document.getElementById("x2");
x.addEventListener("animationstart", fstart);
x.addEventListener("animationiteration", frepeat);
x.addEventListener("animationend", fend);
function fstart() {document.getElementById("x2").innerHTML = "started";}
function frepeat() {document.getElementById("x2").innerHTML = "repeated";}
function fend() {document.getElementById("x2").innerHTML = "ended";}
</script>
</body>
</html>
|
NAVIGATION LINKS
Contents | Prev | Next | HTML Attributes