What are Svelte transitions and animations?

Svelte has built-in support for transitions and animations. Transitions apply when elements enter or leave the DOM. Import from svelte/transition: <div transition:fade>, <p in:fly="{{ y: 200 }}" out:fade>. Built-in transitions: fade, fly, slide, scale, draw (SVG paths), blur. Custom transitions are functions that return a css function: function custom(node, params) { return { duration: 300, css: t => \`transform: scale(\${t})\` } }. Animations: the animate: directive animates elements when they reorder within an {#each} block: <div animate:flip>. Actions (use:): reusable DOM behaviors: <div use:tooltip={params}>. Transitions are compiled to efficient CSS animations, offloaded to the GPU. They are one of Svelte's most delightful features for creating smooth UIs with minimal code.