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