HTML and CSS Reference
In-Depth Information
Table 5-1.
CSS3 Animation Properties
Property
Use
Animation-delay
defines when the animation will start.
Animation-direction
defines whether or not the animation should play in reverse on alternate cycles.
Animation-duration
defines how many seconds or milliseconds an animation takes to complete one cycle.
Animation-fill-mode
specifies how a CSS animation should apply styles to its target before and after it is
executing.
Animation-iteration-count
defines how many times an animation should be played.
specifies a name for the
@keyframes
animation.
Animation-name
Animation-play-state
specifies whether the animation is running or paused.
Animation-timing-function
specifies the speed curve of the animation.
All of these properties when used in CSS3 compliant browsers make up the definitions of animation for the
browser to handle. Let's take a look at an example that you may want to use in your next campaign or at some other
time in the future. Let's call this animation “glow” and pay close attention to the vendor prefixes (see Listing 5-1).
Listing 5-1.
CSS3 Glow Animation
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#square {
-webkit-animation-name: glow;
-moz-animation-name: glow;
-ms-animation-name: glow;
-o-animation-name: glow;
animation-name: glow;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 15;
-moz-animation-iteration-count: 15;
-ms-animation-iteration-count: 15;
-o-animation-iteration-count: 15;
animation-iteration-count: 15;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
