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.

Example

Open Demo

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 In Transistion
```
     

<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

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

Materialize CSS Transitions

Scale In & Scale Out Element

Scale Out Transistion

Scale In Transistion

Web Tutorials