Table of contents

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>