"animation"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/aann/pen/YPVJXB?depth=everything&limit=all&order=popularity&page=54&q=material+&show_forks=false" /> <style class="cp-pen-styles">body{ background:#CCC; } svg{ display:block; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) }</style></head><body> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="198px" height="208px" viewBox="129 59 198 208"> <rect fill="#263238" x="129" y="59" width="198" height="112" rx="6"> <animate id="a1c" attributeName="height" to="102" begin="a1b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="y" to="69" begin="a1b.end+0.1s" dur="0.3s" fill="freeze" /> <animate id="a2a" attributeName="width" to="164" begin="a1c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="146" begin="a1c.end+0.1s" dur="0.3s" fill="freeze" /> <animate id="a2c" attributeName="width" to="141" begin="a2b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="161" begin="a2b.end+0.1s" dur="0.3s" fill="freeze" /> <animate id="a3a" attributeName="height" to="94" begin="a2c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="y" to="77" begin="a2c.end+0.1s" dur="0.3s" fill="freeze" /> <animate id="a4a" attributeName="width" to="62" begin="a3c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="196" begin="a3c.end+0.1s" dur="0.3s" fill="freeze" /> <animate id="a4b" attributeName="height" to="112" begin="a4a.end+2s" dur="0.3s" fill="freeze" /> <animate attributeName="y" to="59" begin="a4a.end+2s" dur="0.3s" fill="freeze" /> <animate id="a4c" attributeName="width" to="198" begin="a4b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="129" begin="a4b.end+0.1s" dur="0.3s" fill="freeze" /> </rect> <rect x="212" y="171" fill="#455A64" width="32" height="25"> <animate attributeName="height" to="2" begin="a1b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="y" to="171" begin="a1b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="width" to="152" begin="a1c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="152" begin="a1c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="width" to="32" begin="a2b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="212" begin="a2b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="height" to="0" begin="a2c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="y" to="169" begin="a2c.end+0.1s" dur="0.3s" fill="freeze" /> <set attributeName="display" to="none" begin="a3a.end" fill="freeze" /> <set attributeName="display" to="block" begin="a4a.end+2s" fill="freeze" /> <animate attributeName="height" to="25" begin="a4a.end+2s" dur="0.3s" fill="freeze" /> <animate attributeName="y" to="171" begin="a4a.end+2s" dur="0.3s" fill="freeze" /> </rect> <rect x="204" y="196" fill="#263238" width="48" height="12"> <animate attributeName="y" to="173" begin="a1b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="width" to="164" begin="a1c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="146" begin="a1c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="width" to="48" begin="a2b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="204" begin="a2b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="height" to="0" begin="a2c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="y" to="169" begin="a2c.end+0.1s" dur="0.3s" fill="freeze" /> <set attributeName="display" to="none" begin="a3a.end" fill="freeze" /> <set attributeName="display" to="block" begin="a4a.end+2s" fill="freeze" /> <animate attributeName="height" to="12" begin="a4a.end+2s" dur="0.3s" fill="freeze" /> <animate attributeName="y" to="196" begin="a4a.end+2s" dur="0.3s" fill="freeze" /> </rect> <path fill="#263238" d="M264,208c-0-7-5-12-12-12V208H264z"> <animateTransform id="a1b" attributeName="transform" type="rotate" from="0 252 208" to="-90 252 208" begin="2s; a1a.end+2s" dur="0.3s" accumulative="sum" fill="freeze" /> <set attributeName="display" to="none" begin="a1b.end+0.1s" fill="freeze" /> <set attributeName="display" to="block" begin="a4c.end+0.1s" fill="freeze" /> <animateTransform id="a1a" attributeName="transform" type="rotate" from="0 252 208" to="90 252 208" begin="a4c.end+0.1s" dur="0.3s" additive="sum" accumulative="sum" fill="freeze" /> </path> <path fill="#263238" d="M204,196c-7,0-12,5-12,12h12V196z"> <animateTransform attributeName="transform" type="rotate" from="0 204 208" to="90 204 208" begin="2s; a1a.end+2s" dur="0.3s" accumulative="sum" fill="freeze" /> <set attributeName="display" to="none" begin="a1b.end+0.1s" fill="freeze" /> <set attributeName="display" to="block" begin="a4c.end+0.1s" fill="freeze" /> <animateTransform attributeName="transform" type="rotate" from="0 204 208" to="-90 204 208" begin="a4c.end+0.1s" dur="0.3s" additive="sum" accumulative="sum" fill="freeze" /> </path> <path fill="#263238" d="M240,196c0,7,5,12,12,12V196H240z"> <set attributeName="display" to="block" begin="2s; a1a.end+2s" fill="freeze" /> <animateTransform attributeName="transform" type="rotate" from="0 252 196" to="-90 252 196" begin="2s; a1a.end+2s" dur="0.3s" fill="freeze" accumulate="sum" /> <animateTransform attributeName="transform" type="translate" from="0 0" to="23 0" dur="0.3s" begin="a1b.end+0.1s" additive="sum" accumulate="sum" fill="freeze" /> <animateTransform attributeName="transform" type="translate" from="0 0" to="0 56" dur="0.3s" begin="a1c.end+0.1s" additive="sum" accumulate="sum" fill="freeze" /> <animateTransform id="a2b" attributeName="transform" type="rotate" from="0 251 197" to="90 251 197" begin="a2a.end+2s" dur="0.3s" fill="freeze" additive="sum" accumulate="sum" /> <set attributeName="display" to="none" begin="a2b.end" fill="freeze" /> </path> <path fill="#263238" d="M204,208c7-0,12-5,12-12h-12V208z"> <set attributeName="display" to="block" begin="2s; a1a.end+2s" fill="freeze" /> <animateTransform attributeName="transform" type="rotate" from="0 204 196" to="90 204 196" begin="2s; a1a.end+2s" dur="0.3s" fill="freeze" accumulate="sum" /> <animateTransform attributeName="transform" type="translate" from="0 0" to="-23 0" dur="0.3s" begin="a1b.end+0.1s" additive="sum" accumulate="sum" fill="freeze" /> <animateTransform attributeName="transform" type="translate" from="0 0" to="0 56" dur="0.3s" begin="a1c.end+0.1s" additive="sum" accumulate="sum" fill="freeze" /> <animateTransform attributeName="transform" type="rotate" from="0 205 197" to="-90 205 197" begin="a2a.end+2s" dur="0.3s" fill="freeze" additive="sum" accumulate="sum" /> <set attributeName="display" to="none" begin="a2b.end" fill="freeze" /> </path> <rect x="223" y="167" fill="#90A4AE" width="10" height="2"> <animate attributeName="width" to="0" begin="a2a.end+2s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="228" begin="a2a.end+2s" dur="0.3s" fill="freeze" /> <set attributeName="display" to="none" begin="a2b.end" fill="freeze" /> <set attributeName="display" to="block" begin="a3a.end+2s" fill="freeze" /> <animate id="a3b" attributeName="width" to="10" begin="a3a.end+2s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="223" begin="a3a.end+2s" dur="0.3s" fill="freeze" /> </rect> <rect x="135" y="65" fill="#FFFFFF" width="186" height="99"> <animate attributeName="height" to="90" begin="a1b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="y" to="74" begin="a1b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="width" to="152" begin="a1c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="152" begin="a1c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="width" to="119" begin="a2b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="168" begin="a2b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="height" to="80" begin="a2c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="y" to="84" begin="a2c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="width" to="48" begin="a3c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="203" begin="a3c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="height" to="99" begin="a4a.end+2s" dur="0.3s" fill="freeze" /> <animate attributeName="y" to="65" begin="a4a.end+2s" dur="0.3s" fill="freeze" /> <animate attributeName="width" to="186" begin="a4b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="135" begin="a4b.end+0.1s" dur="0.3s" fill="freeze" /> </rect> <rect x="135" y="65" fill="#0D47A1" width="186" height="3"> <animate attributeName="y" to="74" begin="a1b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="width" to="152" begin="a1c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="152" begin="a1c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="width" to="119" begin="a2b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="168" begin="a2b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="y" to="84" begin="a2c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="width" to="48" begin="a3c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="203" begin="a3c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="y" to="65" begin="a4a.end+2s" dur="0.3s" fill="freeze" /> <animate attributeName="width" to="186" begin="a4b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="135" begin="a4b.end+0.1s" dur="0.3s" fill="freeze" /> </rect> <rect x="135" y="68" fill="#1976D2" width="186" height="7"> <animate attributeName="y" to="77" begin="a1b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="width" to="152" begin="a1c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="152" begin="a1c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="width" to="119" begin="a2b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="168" begin="a2b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="y" to="87" begin="a2c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="width" to="48" begin="a3c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="203" begin="a3c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="y" to="68" begin="a4a.end+2s" dur="0.3s" fill="freeze" /> <animate attributeName="width" to="186" begin="a4b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="135" begin="a4b.end+0.1s" dur="0.3s" fill="freeze" /> </rect> <rect x="135" y="75" fill="#E0E0E0" width="32" height="89"> <animate attributeName="y" to="84" begin="a1b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="height" to="80" begin="a1b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="152" begin="a1c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="width" to="0" begin="a2a.end+2s" dur="0.3s" fill="freeze" /> <set attributeName="display" to="none" begin="a2b.end" fill="freeze" /> <set attributeName="display" to="block" begin="a4c.end+0.1s" fill="freeze" /> <set attributeName="x" to="135" begin="a4c.end+0.1s" fill="freeze" /> <set attributeName="y" to="75" begin="a4c.end+0.1s" fill="freeze" /> <set attributeName="height" to="89" begin="a4c.end+0.1s" fill="freeze" /> <animate attributeName="width" to="32" begin="a4c.end+0.1s" dur="0.3s" fill="freeze" /> </rect> <rect x="289" y="75" fill="#E0E0E0" width="32" height="89"> <animate attributeName="y" to="84" begin="a1b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="height" to="80" begin="a1b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="304" begin="a1c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="width" to="0" begin="a1c.end+0.1s" dur="0.3s" fill="freeze" /> <set attributeName="display" to="none" begin="a2a.end" fill="freeze" /> <set attributeName="display" to="block" begin="a4c.end+0.1s" fill="freeze" /> <set attributeName="x" to="321" begin="a4c.end+0.1s" fill="freeze" /> <set attributeName="y" to="75" begin="a4c.end+0.1s" fill="freeze" /> <set attributeName="height" to="89" begin="a4c.end+0.1s" fill="freeze" /> <animate attributeName="width" to="32" begin="a4c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="289" begin="a4c.end+0.1s" dur="0.3s" fill="freeze" /> </rect> <rect x="135" y="75" fill="#BDBDBD" width="32" height="8"> <animate attributeName="y" to="84" begin="a1b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="152" begin="a1c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="width" to="0" begin="a2a.end+2s" dur="0.3s" fill="freeze" /> <set attributeName="display" to="none" begin="a2b.end" fill="freeze" /> <set attributeName="display" to="block" begin="a4c.end+0.1s" fill="freeze" /> <set attributeName="x" to="135" begin="a4c.end+0.1s" fill="freeze" /> <set attributeName="y" to="75" begin="a4c.end+0.1s" fill="freeze" /> <set attributeName="height" to="8" begin="a4c.end+0.1s" fill="freeze" /> <animate attributeName="width" to="32" begin="a4c.end+0.1s" dur="0.3s" fill="freeze" /> </rect> <rect x="289" y="75" fill="#BDBDBD" width="32" height="8"> <animate attributeName="y" to="84" begin="a1b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="304" begin="a1c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="width" to="0" begin="a1c.end+0.1s" dur="0.3s" fill="freeze" /> <set attributeName="display" to="none" begin="a2a.end" fill="freeze" /> <set attributeName="display" to="block" begin="a4c.end+0.1s" fill="freeze" /> <set attributeName="x" to="321" begin="a4c.end+0.1s" fill="freeze" /> <set attributeName="y" to="75" begin="a4c.end+0.1s" fill="freeze" /> <set attributeName="height" to="8" begin="a4c.end+0.1s" fill="freeze" /> <animate attributeName="width" to="32" begin="a4c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="289" begin="a4c.end+0.1s" dur="0.3s" fill="freeze" /> </rect> <rect x="167" y="75" fill="#E0E0E0" width="122" height="8"> <animate attributeName="y" to="84" begin="a1b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="184" begin="a1c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="width" to="120" begin="a1c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="152" begin="a2a.end+2s" dur="0.3s" fill="freeze" /> <animate attributeName="width" to="152" begin="a2a.end+2s" dur="0.3s" fill="freeze" /> <animate attributeName="width" to="119" begin="a2b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="168" begin="a2b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="height" to="0" begin="a2c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="y" to="94" begin="a2c.end+0.1s" dur="0.3s" fill="freeze" /> <set attributeName="display" to="none" begin="a3a.end" fill="freeze" /> <set attributeName="display" to="block" begin="a4a.end+2s" fill="freeze" /> <set attributeName="width" to="48" begin="a4a.end+2s" fill="freeze" /> <set attributeName="x" to="203" begin="a4a.end+2s" fill="freeze" /> <animate attributeName="height" to="8" begin="a4a.end+2s" dur="0.3s" fill="freeze" /> <animate attributeName="y" to="75" begin="a4a.end+2s" dur="0.3s" fill="freeze" /> <animate attributeName="width" to="186" begin="a4b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="135" begin="a4b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="width" to="122" begin="a4c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="167" begin="a4c.end+0.1s" dur="0.3s" fill="freeze" /> </rect> <rect fill="#E0E0E0" x="168" y="164" width="119" height="0" display="none"> <set attributeName="display" to="block" begin="a2c.end+0.1s" fill="freeze" /> <set attributeName="width" to="119" begin="a2c.end+0.1s" fill="freeze" /> <set attributeName="x" to="168" begin="a2c.end+0.1s" fill="freeze" /> <animate attributeName="height" to="11" begin="a2c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="y" to="153" begin="a2c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="width" to="48" begin="a3c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="x" to="203" begin="a3c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="height" to="0" begin="a4a.end+2s" dur="0.3s" fill="freeze" /> <animate attributeName="y" to="164" begin="a4a.end+2s" dur="0.3s" fill="freeze" /> <set attributeName="display" to="none" begin="a4b.end" fill="freeze" /> </rect> <circle fill="#8fa3ad" cx="294" cy="124" r="0" display="none"> <set attributeName="display" to="block" begin="a2c.end+0.1s" fill="freeze" /> <animate attributeName="r" to="4" begin="a2c.end+0.1s" dur="0.3s" fill="freeze" /> <animate id="a3c" attributeName="r" to="0" begin="a3b.end+0.1s" dur="0.3s" fill="freeze" /> <set attributeName="display" to="none" begin="a3c.end" fill="freeze" /> </circle> <circle fill="#1E88E5" cx="289" cy="153" r="7"> <animate attributeName="cx" to="275" begin="a2b.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="cx" to="240" begin="a3c.end+0.1s" dur="0.3s" fill="freeze" /> <animate attributeName="cx" to="289" begin="a4b.end+0.1s" dur="0.3s" fill="freeze" /> </circle> </svg> </body></html>

Related: See More

Vue Material Kit PRO
Ripple Dot Animation
Success and Error Icon Animation
Bootstrap4 navigation border animation

Questions / Comments: