Adding animation to a web application can make it more enticing to users and can make some operations more intuitive. There are libraries for many web frameworks that add animation support, but in Svelte this is a built-in feature.
Svelte provides many transition directive values and functions that make it easy to add CSS-based animation to elements. The fact that they are CSS-based rather than JavaScript-based means they do not block the main thread, which is good for performance. This chapter describes each of the provided animations and concludes with showing how custom transitions can be implemented.
When elements are added to or removed from the DOM, animation allows a special effect to occur over a given number of milliseconds. For example, added elements can fade in, and removed elements can slide out of the browser window. This is more visually appealing than abruptly adding or removing an element.