Detecting the end of a CSS animation

An example showing how to detect the end of a CSS animation using Tizen 2.3. 
<style>
#animation {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: lightgreen;
    -webkit-animation: fade 1s ease 3;
}

@-webkit-keyframes fade {
	50% { opacity: 0; }
}
</style>
<div id="animation"></div>
<script>
var element = document.getElementById('animation');

var onAnimationEnd = function() {
  alert('ended');
};

element.addEventListener('webkitAnimationEnd', onAnimationEnd);
</script>
List

Responses

0 Replies