Animation
Use builtin animation for your elements with animation utilities.
Animation
Thanks to Meneses Evandro
Metro 4 contains animation classes to create animated elements such as animated spinner.
ani-spin
- spinner
- spinner2
- spinner3
- spinner4
- spinner5
- loop2
<ul class="unstyled-list icon-list">
<li><span class="mif-spinner ani-spin"></span> spinner</li>
<li><span class="mif-spinner2 ani-spin"></span> spinner2</li>
<li><span class="mif-spinner3 ani-spin"></span> spinner3</li>
<li><span class="mif-spinner4 ani-spin"></span> spinner4</li>
<li><span class="mif-spinner5 ani-spin"></span> spinner5</li>
<li><span class="mif-loop2 ani-spin"></span> loop2</li>
</ul>
ani-pulse
- spinner
- spinner2
- spinner3
- spinner4
- spinner5
- loop2
<ul class="unstyled-list icon-list">
<li><span class="mif-spinner ani-pulse"></span> spinner</li>
<li><span class="mif-spinner2 ani-pulse"></span> spinner2</li>
<li><span class="mif-spinner3 ani-pulse"></span> spinner3</li>
<li><span class="mif-spinner4 ani-pulse"></span> spinner4</li>
<li><span class="mif-spinner5 ani-pulse"></span> spinner5</li>
<li><span class="mif-loop2 ani-pulse"></span> loop2</li>
</ul>
Other
- ani-spanner
- ani-ring
- ani-vertical
- ani-horizontal
- ani-flash
- ani-bounce
- ani-float
- ani-heartbeat
- ani-shake
- ani-shuttle
- ani-pass
- ani-ripple
<ul class="unstyled-list icon-list">
<li><span class="mif-wrench ani-spanner"></span> ani-spanner</li>
<li><span class="mif-bell ani-ring"></span> ani-ring</li>
<li><span class="mif-envelop ani-vertical"></span> ani-vertical</li>
<li><span class="mif-blocked ani-horizontal"></span> ani-horizontal</li>
<li><span class="mif-warning ani-flash"></span> ani-flash</li>
<li><span class="mif-thumbs-up ani-bounce"></span> ani-bounce</li>
<li><span class="mif-paper-plane ani-float"></span> ani-float</li>
<li><span class="mif-heart ani-heartbeat"></span> ani-heartbeat</li>
<li><span class="mif-envelop ani-shake"></span> ani-shake</li>
<li><span class="mif-gift ani-shuttle"></span> ani-shuttle</li>
<li><span class="mif-truck ani-pass"></span> ani-pass</li>
<li><span class="mif-earth ani-ripple"></span> ani-ripple</li>
</ul>
To use animation only on-hover use classes with ani-hover-*
.
<button class="button success">
<span class="mif-download ani-hover-horizontal"> Download</span>
</button>
<button class="shortcut info outline rounded no-caption ani-hover-ring">
<span class="icon mif-bell"></span>
</button>