metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="Use builtin animation for your elements with animation utilities."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Animation - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#_animation">Animation</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Animation</h1> <p class="text-leader"> Use builtin animation for your elements with animation utilities. </p>  <h3 id="_animation">Animation</h3> <p class="text-small text-muted"> Thanks to <a href="https://github.com/MenesesEvandro">Meneses Evandro</a> </p> <p> Metro 4 contains animation classes to create animated elements such as animated spinner. </p> <h5>ani-spin</h5> <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> <pre class=""><code> <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> </code></pre> <h5>ani-pulse</h5> <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> <pre class=""><code> <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> </code></pre>  <h5>Other</h5> <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> <pre class=""><code> <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> </code></pre> <p> To use animation only on-hover use classes with <code>ani-hover-*</code>. </p> <div class="example"> <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> </div> <pre class=""><code> <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> </code></pre> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script>    </body> </html>