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.
<!-- 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>
scale-transition
then add the class scale-out
to scale the element down until it is hidden.
<!-- Scaled out (After the transition applies, the element displays on the screen) -->
<element class="scale-transition scale-out"></element>
scale-out
first, and then add the class scale-in
to scale the element up until it is shown.
<!-- 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>
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>