# Transitions

> Animate content in and out with a few CSS classes.

## Scale

We've made some custom animation classes that will transition your content with only CSS. Each CSS transition consists of a base class that applies the necessary styles and additional classes that control the state of the transition.

### Scale

Use this to scale in and out elements. Make sure to add the base transition class `scale-transition`. Then add the class `scale-out` to scale the element down until it is hidden. To start something as hidden, add the class `scale-out` first, and then add the class `scale-in` to scale the element up until it is shown. With reduced motion requested, these state changes happen immediately. Scaling out is visual only: move focus and manage hidden controls when using it for disclosure.

Toggle Scale

```
<!-- Scaled in -->
<a id="scale-demo" href="#!" class="button extra circle scale-transition" aria-label="Add"><span class="material-symbols" aria-hidden="true">add</span></a>
<!-- Scaled out -->
<a id="scale-demo" href="#!" class="button extra circle scale-transition scale-out" aria-label="Add"><span class="material-symbols" aria-hidden="true">add</span></a>
```