Transition and Animation in CSS

How do we create animation using css properties?

CSS3 has amazing features and that transitions and animations are one of them that bring life to web applications. Adding motion to you web application brings lots of attention and make application look charming.

Transition is the property that tells element to animate when it changes and then animation is the effect after the transition. This tutorial will help you to create animation under CSS3. There are two types animations in CSS:

  • Transition
  • Animation

transition and animation in css3

Difference between transition and animation

Transition:

Transition property performs between two points like start state and end state. If you want to give any hover effect or any event change on any element transition fires. Transition can happen on triggering event like focus or click or page load. Following are some triggering events to create transition effects in css3.

  • :focus
  • :checked
  • :active
  • :disabled
  • media queries
  • page load
  • class changes (Triggered via JavaScript)
  • device orientation

HTML

CSS

Animation:

Animation can be achieved using @keyframes. Keyframe animation work similiar as transitions. But there are some differences between these two. Both have their own benefits. Animation property work itself without any user interaction and no triggering is required. It starts working on page load with keyframe animation.

HTML

CSS

June 6, 2017 by admin
3 Comments