This example showcases a dynamic animation that alters the background color of a square from red to yellow upon loading. The transition occurs over a period of 5 seconds, starting 5 seconds after the initial load. This animation executes just once and maintains a yellow background thereafter:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.square {
width:100px;
height:100px;
background:red;
position:relative;
-moz-animation-name:colorChange;
-moz-animation-duration:5s;
-moz-animation-delay:5s;
-moz-animation-iteration-count:1;
-moz-animation-fill-mode:forwards;
}
@-moz-keyframes colorChange {
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
Check out the interactive demonstration on JSFiddle here: http://jsfiddle.net/c8DDP/
This functionality is supported on Firefox versions 4.0 and above. Similar effects can be achieved by using the -webkit
prefix for webkit-based browsers.