6. Animations
Transitions are great and are the simplest way to create
animations for iPhone- and Android-based devices. If you need finer
animation control at the keyframe level, you can do this using the CSS
animation framework. To be completely honest, I thought this was too
much to be handled only by CSS, a nonprocedural and non-markup language,
but it works great.
WebKit animations are done with the shortcut property -webkit-animation, which has the following
syntax:
-webkit-animation: name duration timing_function delay iteration_count
direction
As you’ve probably guessed, there are also specific properties for
each possible value, listed in Table 3.
Table 3. WebKit animation CSS properties
| Property | Description |
|---|
| -webkit-animation-name | Provides the name of the
animation to be used by the keyframes. |
| -webkit-animation-duration | Specifies the duration of
the animation, in seconds or milliseconds. |
| -webkit-animation-timing-function: | Defines the function used
to calculate intermediate values between the initial and final
values of the property. You can use the CSS cubic-bezier function or any of the
following constants: ease,
linear, ease-in, ease-out, and ease-in-out (the most commonly
used.) |
| -webkit-animation-delay | Defines the offset delay
of the animation beginning from the time when the property was
changed. This can be defined in seconds or milliseconds, and the
default value is 0. If a
negative value is used, the animation starts immediately but
with some of the animation already done. |
| -webkit-animation-iteration-count | Defines how many times
the animation will be repeated. This can be 1 (the default value), any integer
value, the special constant infinite, or a float
value. |
| -webkit-animation-direction | Defines whether the
animation will play in forward direction (normal) or in alternate mode, playing forward on
even iterations and in reverse on odd iterations. |
After reading this list of properties you are probably asking
yourself, where is the animation defined? What will be animating? For
these, the WebKit keyframe extensions come into play.
Note:
If you are moving or scaling an object and you want it to be
animated, it is better to use the performance-accelerated -webkit-transform property rather than the
properties specified in the CSS standards.
6.1. Keyframe at-rule
To define how the animation will work and what it will do, we
need to define a special CSS at-rule called @-webkit-keyframes. This rule is followed by
the animation name (the one specified in -webkit-animation-name).
Inside the keyframe at-rule, we need to specify as many
selectors or animation groups as keyframes we want. The selector is
defined by a percentage value or the constants from (equivalent to 0%) and to (equivalent to 100%). Inside each
selector, we define all the properties and values that we want at that
point in the animation. We can also define the timing to use in every
animation group using -webkit-transition-timing-function.
Warning:
When the animation finishes, the original values are restored.
The elements will not maintain the last keyframe values after the
animation stops.
For example, the following sample moves a div in a square path:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fade Sample</title>
<style>
#box {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 0px;
left: 0px;
}
.squareAnimation {
-webkit-animation-name: squarePath;
-webkit-animation-duration: 4s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes squarePath {
/* We can use 0% or "from" as selector */
from {
top: 0px;
left: 0px;
}
25% {
top: 0px;
left: 100px;
}
50% {
top: 100px;
left: 100px;
}
75% {
top: 100px;
left: 0px;
}
/* We can use 100% or "to" as selector */
100% {
top: 0px;
left: 0px;
}
}
</style>
<script type="text/javascript">
function start() {
// When we apply the -webkit-animation attributes, the animation starts
document.getElementById("box").className = "squareAnimation";
}
</script>
</head>
<body onload="start()">
<h1>Moving over a square path</h1>
<div id="box">
</div>
</body>
</html>
Warning:
If we define the -webkit-animation attributes in the
element from the beginning, the animation will begin when the page
loads. The best solution is to
define animations as classes and, when we want to start an
animation, apply that class to the element.
So, to start the animation we apply the class, and if we want to
stop it before it reaches the ending value we should assign an empty
value to the -webkit-transform-name
property.
We can define one animation that changes several properties, or
use different animations with different names at the same time, each
changing a single property.
6.2. Animation events
As with transitions, we can listen for the events webkitAnimationStart, webkitAnimationIteration, and
webkitAnimationEnd. When fired,
they will send a WebKitAnimationEvent object as a
parameter. There is no event to capture each keyframe change.
The event object has the special properties animationName and elapsedTime, whose value is given in
seconds.
