/

HTML / CSS / JavaScript Tutorial

HTML Event attribute: aminationstart

[this page | pdf | back links]

The HTML aminationstart attribute specifies the event that is triggered when a CSS animation starts. 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">&nbsp;</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


Desktop view | Switch to Mobile