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:
Difference between transition and animation
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.
/* transition effect with changing all property */
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.
/* use animation property to animate an element */