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.
<!-- 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>