Transitions - Materialize

Materialize is a modern responsive CSS framework based on Material Design by Google.

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

Toggle Scale

          Copied!
          content_copy
          
  <!-- 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>

Scale