Skip to main content

Animation

Transition vs Animation Usage​

Trigger Mechanism​

  • Transitions are typically triggered by changes in an element's state e.g. hover
  • Animations are more autonomous and run without relying on changes in an element's state. They can be triggered by setting keyframes and durations, and they continue playing until explicitly stopped.

Usage​

  • Transitions are are suitable for simple effects, like fading in/out or changing colors on hover. They are best for single-state changes and are less suitable for complex, multi-step animations.
  • Animations are more versatile and can handle complex, multi-step animations. They are often used for things like loading spinners, scrolling effects, and other continuous or looping animations.

Transition​

div {
  transform: translateX(100px);
  transition: transform 1s ease;
}

Animation​

@keyframes show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

div {
  animation: show 3s linear infinite;
}