Table of contents

Elements Animation

Use builtin animation for your elements with animation utilities.

Animation

Thanks to Meneses Evandro

Metro UI 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>