Materialize CSS Transitions

Materialize CSS Transitions

Materialize CSS transitions provide some custom animation class that is used to transit the content with only CSS.

Every CSS transition basically, consists of base class and additional classes.Base class applies the adequate style while additional class is used to control the state of the transitions.

Follow the following steps to create Materialize Transition.

  • Use scale in and out elements.

    Scale In & Scale Out Element

         
    <!-- Scaled in (The element displays on the screen)-->
    <element class="scale-transition"></element>
    <!-- Scaled out (The element does not display on the screen.) -->
    <element class="scale-transition scale-out"></element>
       
  • Use base transition class i.e scale-transition then add the class scale-out to scale the element down until it is hidden.

    Scale Out Transistion

         
    <!-- Scaled out (After the transition applies, the element displays on the screen) -->
    <element class="scale-transition scale-out"></element>
       
  • 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.

    Scale Out Transistion

         
    <!-- Scaled in (Element does not display after applies transition)-->
    <element class="scale-transition"></element>
       

General Syntax

<!-- Scaled in -->
<element class="scale-transition"></element> 
<!-- Scaled out -->
<element class="scale-transition scale-out"></element>    
Try It Now

Source Code

Download
<!-- 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>    
Try it yourself

Web Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS