How to add custom CSS transitions in a Svelte application

A good user interface (UI) is essential for making a successful web application. Svelte offers fast, reactive, and simplified UIs which can be made more interactive with the help of CSS. We can add transitions, animations, and designs using CSS to make the UI of our web application more appealing. In Svelte, we can create custom CSS transitions.

Syntax

The following is the syntax to create custom transitions in Svelte:

<script>
//Svelte transition function
function rotates(node,{ duration }){
return {duration,
css: timer=> {
return `
transform: rotateX(${timer * 360}deg);
`
}
};
}
</script>
<!-- Transition Function Usage -->
<label in:rotates="{{duration: 2000}}">Yayy, First Transition!</label>

Example

Both Svelte and CSS are powerful languages for creating exceptional UIs, when we combine them together amazing things can be created. Let's see an example where we can create a custom flipping transition, which is triggered by clicking the checkbox.

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
/wJv+riuzREqgwAAAABJRU5ErkJggg==
Transition code

Explanation

  • Line 2: We define the custom variable, which is used in the conditional statement.

  • Line 3: Here, we create a Svelte transition function that contains two arguments:

    • Node: This is the node on which the defined transition is applied.

    • Parameters: Any parameters which control the transition. In our case, duration, and is returned by the function.

  • Lines 4–10: The return value is an object which has CSS transition properties. In our case, it is a 360-degree rotation of the component.

  • Line 26: We have an input event here which makes the custom variable's value true once clicked.

  • Lines 30–32: Here we have Svelte's conditional statement. If the condition is met, the component inside is displayed along with the custom transition.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved