Search within TutorialsPark

CSS3 Animation


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


CSS3 Animation

mona-lisa mona-lisa

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.

cubic-bezier() : Transition is applied using a custom cubic bezier curve.

step-start : Tansition is applied at the start of the step.

step-end: Transiton is applied at the end of the step.

steps() : Change is introduced in steps specified within the brackets.

Example: CSS animation-timing-function

Give it a TRY! » Note: You can have multiple values seperated by commas


CSS3 Animation : animation-name and animation-duration

1. CSS3 animation property animation-name is used to define a group of animation keyframe and apply it to the element.

2. The value none denotes prevents any animation to be applied to the element.

3. Another CSS3 animation property animation-duration is used to set the time in which the animation must be performed.Its values are specified in seconds(s) or milliseconds(ms)

Example: CSS3 Animation animation-name and animation-duration

Give it a TRY! » Note: Seperate transition delay for different properties are seperated by commas


CSS3 Animation : animation-delay and animation-iteration-count

1. CSS3 property animation-delay is used to introduce a delay after which the animation starts.

2. And property animation-iteration-count defines the number of times the animation is repeated. The values can be a number or infinite.

Example: CSS3 Animation animation-delay and animation-iteration-count

Give it a TRY! »


CSS3 Animation animation-direction

animation-direction:


1. CSS3 animation property direction lets you define the direction of the animation .

2. The possible values are:

normal : Every iteration of the animation plays in forward direction. Its the default

reverse :Iteration are performed in the reverse order from that defined by the @keyframe rule.

alternate : Beginning from 1, odd cycles are performed in normal direction while even cycle are run in reverse direction.

alternate-reverse : Beginning from 1, all odd cycles are performed in reverse, and even cycles in normal direction.

Example: CSS3 Animation animation-direction

Give it a TRY! » Note: Multiple transitions can be specified using commas


CSS3 Animation Pause and Resume


1. CSS3 animation property animation-play-state is used to control the state of the animation.

2.The values are possible for animation-play-state are running and paused

Example: CSS3 animation-play-state

Give it a TRY! » Note: Javascript is used to toogle between the two states of paused and running


CSS3 Animation: Properties before and after Animation

1. CSS3 animation property animation-fill-mode enables you to define the property of the element before and after the animation is performed.

2. The possible values are.

none : Property is set to that at the initial state when the animation is finished.

forward : The property at the final state is retained

backward : If the animation is delayed then the property of the first keyframe is applied while waiting for the animation to stop.

both : The first keyframe property and the last keyframe property are applied before and after the animation

Example: CSS3 Animation animation-fill-mode

Give it a TRY! » Note: The property animation-fill-mode can be specified using the shorthand property


CSS3 Animation : Shorthand

1. CSS3 shorthandanimation enables you to specify all the properties of the animation in a single declaration .

Syntax: CSS3 shorthand animation

Example: CSS3 shorthand animation

Give it a TRY! » Exercise:The property animation-fill-mode cannot be set using the shorthand.


CSS3 Multiple Animations

1. You can apply mutiple animations to a single element by simply putting them one after the another seperated by a comma.

Example: CSS3 multiple Animations

Give it a TRY! » Note: Animation is applied in the order in which they are declared