CSS Animate

Animation in CSS is a very powerful tool which may make a website look interesting. One may confuse between animation and transition effect and may find a similarity, but the difference is huge.

A transition has only a start and an end state. An element changes from one state to another and the browser fills in that state change with a sequence of in-between frames. To change an element from one state to another smoothly, a transition is a good choice.

On the other hand, CSS Animations are a more powerful alternative to transitions. Rather than changing from one beginning state to an end state, animations can be made up of as many states, in-between states, as one may like. It offers more control over how the states are animated. Where a transition only goes from A to B, an animation can go from A, B, C to D. Or any number of stages as needed.

Animation in CSS provides many animations like bouncing, fading, flipping etc.

To include animations, some easy codes needs to be written in the .css file of application.

For example, if one wants to give a sliding out animation to its element, one should write:

@keyframes slideOutLeft {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(-100%, 0, 0);
  }
}

.slideOutLeft {
  animation-name: slideOutLeft;
}