What is the difference between Animation and Transition CSS

Question

What is the difference between the properties animation: and transition: of the CSS?

Answer 1

One transition is still an animation, however this is more limited.

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

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

Start with blue color, finish with red background color and white font color, transition the background should take 300ms while the color happens in 2s.

Going into 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 cannot, for example, say that in the course of this transition the font size should be increased to 2in, rotate 360 degrees, blink 3 times... for this there is animation.

An animation (animation) allows you to have a greater control over the flow of a transition. Now yes, with an animation you can set 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. Switching to 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>

One transition needs an action to happen, for example, something very common: The event of :hover or by altering a property. An animation does not necessarily need an action to be initialized nor an event to end, if necessary it can set it to run infinitely.

Answer 2

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

Transitions

You must have already spent an hour that you wanted when passing the mouse, some element changed color or other properties. So you use the :hover, but the result does not please him because the transition is made "gross", very fast. In CSS3, Transitions came to solve this problem, without you having to resort to some Javascript code or even in the worst case (which I don’t think happens anymore), use Flash.

To solve the problem, you simply assign the property transitionin their element, then from there, all the following styles that are assigned will have a transaction effect between them. The transition will not apply only 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 to make the square go to several positions? Here comes the animations.

Animations

Other than transitions, you can control all the "path" the element will go through when having a transition. This is for several properties, you can define that 50% of the animation will have yellow color, only 100% will have a red color. I took the next 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, programmer, to choose the best resource for the best time. I didn’t 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: http://www.w3schools.com/css/css3_animations.asp