what is animation

An animation lets an element gradually change from one style to another.CSS animations are like mini movies where you are the director giving out instructions (CSS rules) to your actors (HTML elements) for different scenes (keyframes).
Animation properties:


Shorthand property for animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode and animation-play-state.


Defines which animation keyframes to use.


Defines how long the animation lasts


Defines how the values between the start and the end of the animation are calculated.
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)


Defines how long the animation has to wait before starting. The animation will only be delayed on its first iteration. you can use seconds s or milliseconds ms as timing .It defaults to 0s, which means no animation at all.

/* Single animation */
animation-delay: 3s;
animation-delay: 0s;
animation-delay: -1500ms;
/* Multiple animations */
animation-delay: 2.1s, 480ms;


Defines how many times the animation is played.

animation-iteration-count: infinite;

animation-iteration-count: 1;


Defines in which direction the animation is played.
animation-direction: normal;

value : normal , reverse , alternate , alternate-reverse

~ It’s easier to visualise if the animation’s iteration count is set to infinite.


Defines what happens before an animation starts and after it ends. The fill mode allows to tell the browser if the animation’s styles should also be applied outside of the animation.
Backwards,forwards,both , none


Defines if an animation is playing or not.
animation-play-state: running;
animation-play-state: paused;


The @keyframes rule specifies the animation code.

@keyframes animationname {keyframes-selector {css-styles;}}

@-webkit-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
@-moz-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
@-o-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
0% { opacity: 0; }
100% { opacity: 1; }