Animation

An animation lets an element gradually change from one style to another.
You can change as many CSS properties you want, as many times you want.
To use CSS animation, you must first specify some keyframes for the animation.
Keyframes hold what styles the element will have at certain times.

Animation Properties

Delay an Animation
The animation-delay property specifies a delay for the start of an animation.

Animation-direction property:
specifies whether an animation should be played forwards, backwards or in alternate cycles. The animation-direction property can have the following values:

normal – The animation is played as normal (forwards). This is default
reverse – The animation is played in reverse direction (backwards)
alternate – The animation is played forwards first, then backwards
alternate-reverse – The animation is played backwards first, then forwards.

animation-timing-function property
specifies the speed curve of the animation. The animation-timing-function property can have the following values:

ease – Specifies an animation with a slow start, then fast, then end slowly (this is default)
linear – Specifies an animation with the same speed from start to end
ease-in – Specifies an animation with a slow start
ease-out – Specifies an animation with a slow end
ease-in-out – Specifies an animation with a slow start and end
cubic-bezier(n,n,n,n) – Lets you define your own values in a cubic-bezier function.

animation-fill-mode property
specifies a style for the target element when the animation is not playing (before it starts, after it ends, or both).

animation-fill-mode property can have the following values:

none – Default value. Animation will not apply any styles to the element before or after it is executing
forwards – The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count)
backwards – The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period
both – The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions

Below is an example with Different Animation

Exercise 17.1

Add any 10 Animation that you like the most(refer the above example)