settings

CSS Transitions

bookmark

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 scale in and out elements. Make sure to add the base transition class scale-transition. Then add the class scale-outto scale the element down until it is hidden. To start something as hidden, add the class scale-outfirst, and then add the class scale-into scale the element up until it is shown.

<!-- Scaled in --><a id="scale-demo" href="#!" class="btn-floating btn-large scale-transition">    <i class="material-icons">add</i></a><!-- Scaled out --><a id="scale-demo" href="#!" class="btn-floating btn-large scale-transition scale-out">    <i class="material-icons">add</i></a>