HTML and CSS Reference
In-Depth Information
<div class="test">&nbsp;</div>
When you load the page on your mobile device, the circle should animate to the
center of the screen and gradually change color to yellow.
You can also control which properties should be transitioned by specifying the
property, the duration, timing function, and delay, as shown in the following
[-moz-|-o-|-webkit-]transition: property transition-duration transition-timing-
function transition-delay [, property duration timing-function delay]
You can specify as many properties as you wish to animate using this shorthand
method. Table 5-1 lists the possible values.
Table 5-1. CSS Transition Properties
The CSS property to animate all , width , height , opacity ,
The duration of the transition
in seconds; the default is 0
X s
linear , ease , ease-in , ease-
out , ease-in-out , cubic-
The timing function to use;
the default is ease
The number of seconds to
delay the transition by
X s
For example, you might want to begin transitioning the left position five seconds
after the color transition begins and ease the left position out. In that case you
would use the following code.
.test {
width: 100px;
height: 100px;
position: absolute;
top: 0px;
left: 0px;
border-radius: 50px;
background-color: blue;
transition: left 5s ease-out 5s, background-color 5s ease 0s;
Search WWH ::

Custom Search