CSS3 References

CSS3 Animation

Use CSS3 Animations to create complex animation, by specifying properties at each state.

CSS3 Animation

1. CSS3 transition enables you to create animation between
two points and control the time duration and timing function
for the transition. But its suitable only for simple transitions.

2. But with CSS3 animation properties you can create complex animation by using
@keyframe , which specifies properties for each state.
It even allows you to control the
finer details of the animation like delay, iteration-count, timing-function, direction etc

How does CSS3 @keyframe Animation work?

1. The @keyframes property enables you to chain mutiple transition on the
same property which are then performed in a sequence one after the another.

2. Define CSS properties for elements at each state along a time line using
@keyframes.

3. Animations can be repeated a finite number of times or indefintely, you can even pause and resume animations.

CSS3 Animation: Creating @keyframes

1. To create an animation a very basic step is to define @keyframes,
it denotes the point of stand and end of the transition.

2. A simple animations have just two keyframes(start and end),
while complex animations have multiple keyframes, defining properties
for each state on the time-line

CSS Syntax: @keyframes

CSS Example : transform-style property

Give it a TRY! » Note:When the Animation is completed,
the element retracts to it original State

CSS3 Animation: keyframes timing function

linear

ease

ease-in

ease-out

ease-in-out

steps(5)

step-start

step-end

cubic-bezier(1,-0.1,0.8,1)

1.To control the rate of the animation use CSS3
transition-timing-function property

The values are as follows:

linear: The rate of transition remains constant from start to end

ease : The transition begins quickly and then gradually slows down

ease-in : Begins slowly and then ends then speeds up towards the end.

ease-out : The transition begins quickly and stays quick longer than ease, and then slows down and ends abruptly

ease-in-out: Accelerates in the beginning and then decelerates in the end.