CSS3 for Mobile - Learn HTML5 and JavaScript for Android - page 121

<div class="test">&nbsp;</div>

<script>
document.getElementsByClassName('test')[0].classList.add('second-position');
</script>
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
example.
[-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

Property Description Values/Options

[-moz-|-webkit-|-o-
]transition-property

The CSS property to animate all , width , height , opacity ,
etc.

[-moz-|-webkit-|-o-
]transition-duration

The duration of the transition
in seconds; the default is 0

X s

[-moz-|-webkit-|-o-
]transition-timing-
function

linear , ease , ease-in , ease-
out , ease-in-out , cubic-
bezier

The timing function to use;
the default is ease

[-moz-|-webkit-|-o-
]transition-delay

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;