What is the difference between Animation and Transition CSS

A transition is still an animation, however it is more limited.

You can set the runtime, delay , which attributes will be affected by the transition ... But you can not define what should occur between the initial and final state of a transition, only how it should start and end. For example:

Start with the color blue, end with the color red and this transition should have a time of 400ms.

Start with blue color, end with red background color and white font color, background transition should take 300ms while color transition takes 2s.

Moving on to the code would be:

div {
  background: blue;
  float: left;
  margin: 4px;
  height: 30px;
  width: 30px
}

div:hover {
  background: red
}

#b:hover {
  color: white
}

#a {
  transition: all 300ms ease-in
}

#b {
  transition: background 300ms ease-in, color 2s ease-in-out
}

<div id='a'>A</div>
<div id='b'>B</div>

You can not, for example, say that during this transition the font size should be increased to 2en, rotated 360 degrees, blinked 3 times ... for that there is animation .

An animation ( animation ) allows you to have greater control over the flow of a transition. Now, with an animation you can define through @keyframes that:

It should start with the red background color, when you have completed 25% of the transition the font size should increase to 2em. During the transition, the background color should change 3 times to blue. Moving on to the code:

@keyframes animacao {
  0%, 40%, 70%, 100% {
    background: red
  }
  
  25% {
    font-size: 2em;
  }
  
  30%, 60%, 90% {
    background: blue;
  }
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes animacao {
  0%, 40%, 70%, 100% {
    background: red  
  }
  
  15% {
    font-size: 2em;
  }
  
  30%, 60%, 90% {
    background: blue;
  }
  
  100% {
    -webkit-transform: rotate(360deg);
  }
}

div {
  background: red;
  width: 40px;
  height: 40px;
  float: left;
  margin: 4px
}

#a {
  -webkit-animation: animacao 2s;
  animation: animacao 2s;
}

<div id='a'>ops</div>

A transition needs an action to happen, for example, something very common: The event of :hover or else when changing a property. An animation does not necessarily need an action to be initialized or an event to finish, if necessary you can set it to run infinitely.

The two properties are for controlling transitions of other properties, but there is a small one related to the control of this transition.

Transitions

You must have gone through an hour that you wanted to change some color or other properties when passing the mouse. So you use :hover , but the result does not please you because the transition is done in a "crude" way, very fast. In CSS3, transitions have come to solve this problem, without you having to resort to some JavaScript code or at worst (which I believe not to happen), use Flash.

To solve the problem, you simply assign the transition property to your element, so from there all subsequent styles that are assigned will have a transaction effect between them. The transition will not only apply to :hover , but also when there is a class change, for example, in which it will change a property. Example of an element with transition:

#quadrado, #quadrado-transition {
  width:100px;
  height:100px;
  background-color:blue;
  margin-left:10px;
  float:left;
}

#quadrado:hover, #quadrado-transition:hover {
  background-color:red;
}

#quadrado-transition {
  /* Aplicando a transition apenas no quadrado da direita */
  transition:background-color 1s linear;
}

<div id="quadrado">Sem transition</div>
<div id="quadrado-transition">Com transition</div>

This way you can change the properties more smoothly, but how do you make the square go to different positions? Then you enter the animations .

Animations

Other than transitions , you can control all of the "paths" that the element will take to have a transition. This is for several properties, you can define that at 50% of the animation it will have a yellow color, only 100% will have a red color. I got the following example from W3Schools:

div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation: myfirst 5s linear 2s infinite alternate; /* Chrome, Safari, Opera */
    animation: myfirst 5s linear 2s infinite alternate;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:100px;}
    75%  {background-color:green; left:0px; top:100px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes myfirst {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:100px;}
    75%  {background-color:green; left:0px; top:100px;}
    100% {background-color:red; left:0px; top:0px;}
}

<div></div>

Every situation is different, so it's up to you, the programmer, to choose the best resource for the best time. I did not explain all the properties because I believe that this is not the focus of the question, but with a quick search you learn, and if not, we are here to help you.

References

• CSS3 Animations: link