CSS3 animation vs CSS3 transition

Both CSS3 animation and CSS3 transition can be used to transition an element in a webpage. They can be used to transition some CSS properties within a given period of time. They have many similarities. They do have a few differences as well. So an user needs to understand the differences between them in order to better use them in different scenarios.

First, let's see an example on how to change the width of a div from 100px to 200px within 2 seconds when hovering on it.

With CSS3 animation , the CSS looks like :

@keyframes anim {
	from {width : 100px;}
	to {width : 200px;}
}
#div{
	width:100px;
	height:100px;
	background-color:red;
}
#div:hover{
	animation : anim 2s;
}

With CSS3 transition, the CSS looks like :

#div{
	width:100px;
	height:100px;
	background-color:red;
	transition:width 2s;
}
#div:hover{
	width:200px;
}

You can notice that you need to define an animation yourself and then apply it when hovering on the div. This needs more codes to be written. However, one good thing about t is it provides more flexibility over CSS3 transition. 

In this post, we will mainly focus on the differences between CSS3 animation and CSS3 transition.

The main differences are :

1. It seems CSS3 animation will not lift the animation rendering process to the GPU like what CSS3 transition does. This will cause lagging effect when many JS tasks are executing at the same time. Because all tasks are competing for the CPU. While CSS3 transition may lift the animation to GPU so that it will not compete with CPU and can be renderrred separately.
   
   Takeaway : If performance is a concern, then choose CSS3 transition.
   
   
2. After each animation, the CSS3 animation will move back to its original state where before the animation starts While CSS3 transition will keep the animation state after each transition.
   
   For example, if a div has a CSS property top set to 100px, and then using CSS animation to move the div up 50px, after the animation completes, the div will be moved back to its original position where top is 100px. But when using CSS3 transition, the div will be moved up 50px and it will stay there after the transition completes.
   
   Takeaway : If state is to be maintained, then choose CSS3 transition.
   
   
3. CSS3 animation can have iteration count set(animation-iteration-count) which means how many times the animation will be repeated. But CSS3 transition will only perform the animation once. To repeat the animation with CSS3 transition, JavaScript may need to be used.
   
   Takeaway : If the animation needs to be repeated, choose CSS3 animation.
   
   
4. CSS3 animation gives more control to the developer on how the animation is performed. You can define what the state should be at different stages of the animation, e.g, 0%, 10%, 30%, 50%....
   
   CSS3 transition can only define the start and end state and the rest will be handled by the browser.
   
   Takeaway : If a complicated animation is desired, then CSS3 animation is preferred.
   
   
5. CSS3 transition is more simpler to use, it doesn't require you to create your own keyframes. There are a predefined set of animations which can be used. And there are a set of effects you can use to transition an element.
   
   Takeaway : If you want to implement animation quickly, then choose CSS3 transition.