• CSS transitions allow you to change property values smoothly, but they always need to be triggered like hover. Property changes do not take effect immediately. Over a period of time, the property changes take place.

• Animations transitioning between two states.The states between the start and final states are defined by the browser implicitly.

Transition	Animations
Transitions cannot loop (You can make them do that but they are not designed for that).	Animations have no problem in looping.
Transitions need a trigger to run like mouse hover.	The animation just start. They don’t need any kind of external trigger source.
Transitions are easy to work in JavaScript.	The animations are hard to work in JavaScript. The syntax for manipulating a keyframe and assigning a new value to it, is very complex.
Transitions animate a object from one point to another.	Animation allows you to define Keyframes which varies from one state to another with various properties and time frame.
Use transition for manipulating the value using JavaScript.	Flexibility is provided by having multiple keyframes and easy loop.