5. Transitions
A transition is just an automatic
animation that takes place when a CSS property’s value changes. The
property must be defined by the browser as able to animate (typically
this applies to position and size properties). There isn’t an official
list of properties that animations will work on, but the general policy
is that any attribute with numerical or color values should be animated
using transitions. There are also a few exceptions, like the visibility discrete property.
Warning:
Remember, these transitions are defined entirely using CSS: we
are not using JavaScript or any other technique to create the
animations. This may sound a bit strange, but it is a simple and
powerful technique.
The transitions framework is available for Safari (from iOS 2.0)
and the Android browser, and transitions have enhanced performance on
these devices.
To create a transition, we should:
Define the transition properties (duration, delay, where to
apply, timing function) in the element(s) we want to animate.
Change the values of the attributes of the element(s) to
animate using JavaScript, or apply classes to or remove them from
the element.
Verify that the animation is working.
Sounds simple, right? Let’s do it.
5.1. Animation properties
An animation can be defined using the shortcut property -webkit-transition, with the following
syntax:
-webkit-transition: property duration timing_function delay [, ...];
We can also use the specific properties listed in Table 2.
Table 2. WebKit transition properties
| Property | Description |
|---|
| -webkit-transition-property | Defines which property
or properties to animate. We can use a comma-separated list,
or the constant value all. |
| -webkit-transition-duration | Defines the duration of
the transition. The value can be 0 (no animation) or a positive value
in seconds (using s as the
unit) or milliseconds (using ms as the unit). If we want to
define different timings for each property, we can use a list
of comma-separated values in the same order as the -webkit-transition-property
value. |
| -webkit-transition-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-transition-timing-function | Defines the function
used to calculate intermediate values from the initial to the
finish value of the property. You can use the CSS cubic-bezierease,
linear, ease-in, ease-out, and ease-in-out (the most commonly
used.) function, or any of the
following constants: |
For example, the following code produces a fade-in, fade-out
animation:
<!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;
-webkit-transition: opacity 2s;
}
.hide {
opacity: 0;
}
</style>
<script type="text/javascript">
function fade() {
var box = document.getElementById("box");
box.className = (box.className=="hide") ? "" : "hide";
box.innerHTML = box.className;
}
</script>
</head>
<body>
<h1>Fading</h1>
<input type="button" onclick="fade()" value="Hide-Show" />
<div id="box">
</div>
</body>
</html>
We can do similar transitions for resizing, relocation, color
changes, or even 3D transitions using the transform properties that we
will see in a minute.
5.2. Transition ending
The transition ending can be listened for from JavaScript just
like any other DOM event, using addEventListener. You can then initiate
another transition or do something else when you are sure that the
animation has finished. The event to listen for is called webkitTransitionEnd.
We can listen for it using the following code:
box.addEventListener('webkitTransitionEnd', function(event) {
alert("Finished transition");
});
