Are animations the same thing as transitions?

Question

I am studying CSS With some difficulties to understand some things the question is animations are equal to transitions or similar?

Example 1

<style>
    div {
      width: 100px;
      height: 100px;
      background: red;
      transition: width 1s linear;
    }

    div:hover {
      width: 400px;
    }
</style>
<div></div>

In the example above is equal to the bottom

Example 2

<style>
    div {
      width: 100px;
      height: 100px;
      background: red;
      transition: width 1s linear;
    }

    div:hover {
      animation: animar 1s linear;
    }
    
    @keyframes animar {
        50% {
          width: 400px
        }
    }
</style>
<div></div>

What are the differences between the two? if I have a project and have only transitions I can call animations? or vice versa?

Answer 1

An animation with transition only happens if there is a user interaction, because it has only an initial state and an end state, but the end state only appears if the user makes a :hover for example.

Already the animation with keyframes does not require user interaction to happen. Also, with it you can better control how the animation happens over time (Timeline) and animate several elements at the same time. I have a more robust format than Transition, but it is not always the right one.

Both are animations, the ideal is that you indicate to the developer or the work team what kind of animation you used, if it is with keyframes or transition if necessary.

Summing up a transition will never happen automatically, not knowing that the user interacts with the interface, already the keyframes may or may not be automatic.

The two have similar performances, what will most affect the animation are the CSS properties that you will animate as margin or width and height demand the re-paint of the screen, harming the ux giving the impression that the animation is catching, already properties like opacity or transform does not affect much the ux, because the animations become more fluid. Here you can read more about the subject https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

Look at this example how the bottom square is "trembling" and the top one is not, because the bottom one I cheered up with margin, a property not very recommended for animations...

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  box-shadow: 0 0 5px black;
  background-image: linear-gradient(to bottom, #f0f 0%, #f00 100%);
  position: relative;
  margin-bottom: 10px;
  animation: trans 2s infinite linear;
}
.box:nth-child(2) {
  animation: margem 2s infinite linear;
}

@keyframes trans {
  to {
    transform: translateX(200px);
  }
}
@keyframes margem {
  to {
    margin-left: 200px;
  }
}

<div class="box"></div>
<div class="box"></div>