How Svelte transition works under the hood

Before we delve into the inner workings of Svelte transitions, let us first briefly discuss the general methods for creating animations on the web. Understanding these fundamental concepts provides a solid foundation for grasping how Svelte transitions work.

In general, you can create animations using either CSS or JavaScript.

Creating animations with CSS

To create animations using CSS, you can use the CSS animation property along with the @keyframes rules. The @keyframes rule is used to define a sequence of styles, specifying the CSS styles at each keyframe (from 0% to 100%) during the animation.

See this, for example:

@keyframes example {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.75);
  }
}

In the preceding code snippet, we defined an animation keyframe...