CSS3 Animation

CSS3 Animation is process of making shape changes and creating motions with elements.

CSS3 Animation- properties

Following are the properties:

• @keyframes
• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mode
• animation

@keyframes

In @keyframes rule, the animation will gradually change from the current style to the new style at certain times.

div {
  width: 150px;
  height: 150px;
  background-color: pink;
  animation-name: example;
  animation-duration: 5s;
}

animation-delay

This property is used to specify a delay for the start of an animation.

width: 150px;
  height: 150px;
  background-color: violet;
  position: relative;
  animation-name: example;
  animation-duration: 5s;
  animation-delay: 3s;

animation-iteration-count

This property is used to specify the number of times an animation should run.

div {
  width: 150px;
  height: 150px;
  background-color: violet;
  position: relative;
  animation-name: example;
  animation-duration: 5s;
  animation-iteration-count: 4;
}

animation-direction

This property is used to specify whether an animation should be played forwards, backwards or in alternate cycles.

div {
  width: 150px;
  height: 150px;
  background-color: violet;
  position: relative;
  animation-name: example;
  animation-duration: 5s;
   animation-direction: reverse;
}

animation-timing-function

This property is used to specify the speed curve of the animation.

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}