"css animation"
Bootstrap 3.0.0 Snippet by evarevirus

<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/elrumordelaluz/pen/pHKcC?depth=everything&limit=all&order=popularity&page=26&q=section&show_forks=false" /> <script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script> <style class="cp-pen-styles">@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Gentium+Basic); @import url(https://fonts.googleapis.com/css?family=Dancing+Script); html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } html { line-height: 1; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } q, blockquote { quotes: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } a img { border: none; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } .shake { display: inline-block; transform-origin: center center; } .shake:hover { animation-name: shake-base; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.freez { animation-name: shake-base; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; animation-play-state: paused; } .shake.freez.shake-hard { animation-name: shake-hard; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.freez.shake-slow { animation-name: shake-slow; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.freez.shake-little { animation-name: shake-little; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.freez.shake-horizontal { animation-name: shake-horizontal; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.freez.shake-vertical { animation-name: shake-vertical; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.freez.shake-rotate { animation-name: shake-rotate; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.freez.shake-opacity { animation-name: shake-opacity; animation-duration: 200ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.freez.shake-crazy { animation-name: shake-crazy; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.freez:hover { animation-play-state: running; } .shake.shake-hard:hover { animation-name: shake-hard; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.shake-slow:hover { animation-name: shake-slow; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.shake-little:hover { animation-name: shake-little; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.shake-horizontal:hover { animation-name: shake-horizontal; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.shake-vertical:hover { animation-name: shake-vertical; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.shake-rotate:hover { animation-name: shake-rotate; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.shake-opacity:hover { animation-name: shake-opacity; animation-duration: 200ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.shake-crazy:hover { animation-name: shake-crazy; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.shake-constant { animation-name: shake-base; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.shake-constant.shake-hard { animation-name: shake-hard; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.shake-constant.shake-slow { animation-name: shake-slow; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.shake-constant.shake-little { animation-name: shake-little; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.shake-constant.shake-horizontal { animation-name: shake-horizontal; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.shake-constant.shake-vertical { animation-name: shake-vertical; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.shake-constant.shake-rotate { animation-name: shake-rotate; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.shake-constant.shake-opacity { animation-name: shake-opacity; animation-duration: 200ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.shake-constant.shake-crazy { animation-name: shake-crazy; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 0s; } .shake.shake-constant.hover-stop:hover { animation-play-state: paused; } .shake.shake-delay { animation-name: shake-base; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-delay: 4s; } @keyframes shake-base { 0% { transform: translate(0px, 0px) rotate(0deg); } 2% { transform: translate(-1.5px, 1.5px) rotate(-0.5deg); } 4% { transform: translate(2.5px, 2.5px) rotate(-0.5deg); } 6% { transform: translate(1.5px, 2.5px) rotate(1.5deg); } 8% { transform: translate(1.5px, 2.5px) rotate(0.5deg); } 10% { transform: translate(1.5px, -0.5px) rotate(1.5deg); } 12% { transform: translate(-1.5px, 1.5px) rotate(0.5deg); } 14% { transform: translate(-0.5px, -1.5px) rotate(-0.5deg); } 16% { transform: translate(-0.5px, 1.5px) rotate(0.5deg); } 18% { transform: translate(1.5px, 1.5px) rotate(1.5deg); } 20% { transform: translate(1.5px, 1.5px) rotate(1.5deg); } 22% { transform: translate(-0.5px, -1.5px) rotate(-0.5deg); } 24% { transform: translate(-1.5px, 2.5px) rotate(-0.5deg); } 26% { transform: translate(-1.5px, -1.5px) rotate(-0.5deg); } 28% { transform: translate(-0.5px, 1.5px) rotate(-0.5deg); } 30% { transform: translate(2.5px, -0.5px) rotate(0.5deg); } 32% { transform: translate(0.5px, -1.5px) rotate(0.5deg); } 34% { transform: translate(-0.5px, 0.5px) rotate(-0.5deg); } 36% { transform: translate(2.5px, -1.5px) rotate(1.5deg); } 38% { transform: translate(2.5px, 1.5px) rotate(1.5deg); } 40% { transform: translate(2.5px, -1.5px) rotate(0.5deg); } 42% { transform: translate(2.5px, -0.5px) rotate(0.5deg); } 44% { transform: translate(-1.5px, 0.5px) rotate(0.5deg); } 46% { transform: translate(-1.5px, -1.5px) rotate(0.5deg); } 48% { transform: translate(0.5px, 2.5px) rotate(1.5deg); } 50% { transform: translate(-1.5px, 2.5px) rotate(-0.5deg); } 52% { transform: translate(-0.5px, -1.5px) rotate(0.5deg); } 54% { transform: translate(-1.5px, -1.5px) rotate(1.5deg); } 56% { transform: translate(-0.5px, 0.5px) rotate(-0.5deg); } 58% { transform: translate(0.5px, -0.5px) rotate(0.5deg); } 60% { transform: translate(-1.5px, -1.5px) rotate(1.5deg); } 62% { transform: translate(2.5px, 0.5px) rotate(0.5deg); } 64% { transform: translate(-1.5px, 1.5px) rotate(1.5deg); } 66% { transform: translate(1.5px, 1.5px) rotate(0.5deg); } 68% { transform: translate(-0.5px, 0.5px) rotate(-0.5deg); } 70% { transform: translate(2.5px, 0.5px) rotate(0.5deg); } 72% { transform: translate(0.5px, -0.5px) rotate(0.5deg); } 74% { transform: translate(2.5px, 1.5px) rotate(1.5deg); } 76% { transform: translate(1.5px, 2.5px) rotate(-0.5deg); } 78% { transform: translate(2.5px, 0.5px) rotate(0.5deg); } 80% { transform: translate(-0.5px, 1.5px) rotate(0.5deg); } 82% { transform: translate(1.5px, 0.5px) rotate(1.5deg); } 84% { transform: translate(2.5px, 1.5px) rotate(0.5deg); } 86% { transform: translate(0.5px, 1.5px) rotate(1.5deg); } 88% { transform: translate(-1.5px, 0.5px) rotate(1.5deg); } 90% { transform: translate(0.5px, -0.5px) rotate(-0.5deg); } 92% { transform: translate(-1.5px, -0.5px) rotate(1.5deg); } 94% { transform: translate(-0.5px, -0.5px) rotate(-0.5deg); } 96% { transform: translate(0.5px, 2.5px) rotate(-0.5deg); } 98% { transform: translate(2.5px, -0.5px) rotate(0.5deg); } } @keyframes shake-little { 0% { transform: translate(0px, 0px) rotate(0deg); } 2% { transform: translate(1px, 0px) rotate(0.5deg); } 4% { transform: translate(0px, 0px) rotate(0.5deg); } 6% { transform: translate(0px, 1px) rotate(0.5deg); } 8% { transform: translate(1px, 1px) rotate(0.5deg); } 10% { transform: translate(0px, 0px) rotate(0.5deg); } 12% { transform: translate(0px, 0px) rotate(0.5deg); } 14% { transform: translate(1px, 0px) rotate(0.5deg); } 16% { transform: translate(1px, 1px) rotate(0.5deg); } 18% { transform: translate(0px, 1px) rotate(0.5deg); } 20% { transform: translate(0px, 1px) rotate(0.5deg); } 22% { transform: translate(0px, 0px) rotate(0.5deg); } 24% { transform: translate(1px, 1px) rotate(0.5deg); } 26% { transform: translate(1px, 0px) rotate(0.5deg); } 28% { transform: translate(1px, 0px) rotate(0.5deg); } 30% { transform: translate(0px, 0px) rotate(0.5deg); } 32% { transform: translate(0px, 1px) rotate(0.5deg); } 34% { transform: translate(0px, 1px) rotate(0.5deg); } 36% { transform: translate(1px, 1px) rotate(0.5deg); } 38% { transform: translate(0px, 0px) rotate(0.5deg); } 40% { transform: translate(0px, 1px) rotate(0.5deg); } 42% { transform: translate(1px, 1px) rotate(0.5deg); } 44% { transform: translate(0px, 1px) rotate(0.5deg); } 46% { transform: translate(0px, 1px) rotate(0.5deg); } 48% { transform: translate(0px, 1px) rotate(0.5deg); } 50% { transform: translate(1px, 1px) rotate(0.5deg); } 52% { transform: translate(1px, 0px) rotate(0.5deg); } 54% { transform: translate(0px, 1px) rotate(0.5deg); } 56% { transform: translate(1px, 1px) rotate(0.5deg); } 58% { transform: translate(0px, 0px) rotate(0.5deg); } 60% { transform: translate(0px, 0px) rotate(0.5deg); } 62% { transform: translate(0px, 0px) rotate(0.5deg); } 64% { transform: translate(1px, 0px) rotate(0.5deg); } 66% { transform: translate(0px, 1px) rotate(0.5deg); } 68% { transform: translate(0px, 1px) rotate(0.5deg); } 70% { transform: translate(1px, 0px) rotate(0.5deg); } 72% { transform: translate(0px, 1px) rotate(0.5deg); } 74% { transform: translate(1px, 1px) rotate(0.5deg); } 76% { transform: translate(1px, 0px) rotate(0.5deg); } 78% { transform: translate(0px, 0px) rotate(0.5deg); } 80% { transform: translate(0px, 0px) rotate(0.5deg); } 82% { transform: translate(1px, 0px) rotate(0.5deg); } 84% { transform: translate(0px, 1px) rotate(0.5deg); } 86% { transform: translate(1px, 0px) rotate(0.5deg); } 88% { transform: translate(0px, 0px) rotate(0.5deg); } 90% { transform: translate(0px, 1px) rotate(0.5deg); } 92% { transform: translate(1px, 0px) rotate(0.5deg); } 94% { transform: translate(1px, 1px) rotate(0.5deg); } 96% { transform: translate(1px, 0px) rotate(0.5deg); } 98% { transform: translate(0px, 0px) rotate(0.5deg); } } @keyframes shake-slow { 0% { transform: translate(0px, 0px) rotate(0deg); } 2% { transform: translate(-4px, 1px) rotate(3.5deg); } 4% { transform: translate(10px, -9px) rotate(2.5deg); } 6% { transform: translate(3px, -4px) rotate(1.5deg); } 8% { transform: translate(1px, 5px) rotate(-0.5deg); } 10% { transform: translate(1px, -3px) rotate(2.5deg); } 12% { transform: translate(4px, 5px) rotate(-0.5deg); } 14% { transform: translate(-9px, 2px) rotate(-2.5deg); } 16% { transform: translate(2px, 4px) rotate(-2.5deg); } 18% { transform: translate(6px, -7px) rotate(-0.5deg); } 20% { transform: translate(-6px, 6px) rotate(0.5deg); } 22% { transform: translate(-3px, 8px) rotate(-2.5deg); } 24% { transform: translate(3px, -6px) rotate(-2.5deg); } 26% { transform: translate(1px, 8px) rotate(-1.5deg); } 28% { transform: translate(3px, -9px) rotate(-1.5deg); } 30% { transform: translate(-6px, 4px) rotate(1.5deg); } 32% { transform: translate(10px, -6px) rotate(1.5deg); } 34% { transform: translate(2px, -4px) rotate(-1.5deg); } 36% { transform: translate(3px, 8px) rotate(-2.5deg); } 38% { transform: translate(5px, 8px) rotate(-2.5deg); } 40% { transform: translate(0px, -5px) rotate(-2.5deg); } 42% { transform: translate(-7px, 2px) rotate(-0.5deg); } 44% { transform: translate(3px, -5px) rotate(3.5deg); } 46% { transform: translate(-8px, -4px) rotate(1.5deg); } 48% { transform: translate(8px, -7px) rotate(1.5deg); } 50% { transform: translate(-3px, -5px) rotate(-0.5deg); } 52% { transform: translate(6px, 4px) rotate(2.5deg); } 54% { transform: translate(-7px, 5px) rotate(-2.5deg); } 56% { transform: translate(6px, 2px) rotate(-1.5deg); } 58% { transform: translate(-1px, 3px) rotate(0.5deg); } 60% { transform: translate(-1px, -8px) rotate(-1.5deg); } 62% { transform: translate(7px, -7px) rotate(-1.5deg); } 64% { transform: translate(4px, 0px) rotate(-2.5deg); } 66% { transform: translate(8px, 9px) rotate(-2.5deg); } 68% { transform: translate(-4px, 3px) rotate(-0.5deg); } 70% { transform: translate(-9px, -4px) rotate(0.5deg); } 72% { transform: translate(-9px, -2px) rotate(-0.5deg); } 74% { transform: translate(0px, 6px) rotate(3.5deg); } 76% { transform: translate(-3px, -2px) rotate(-0.5deg); } 78% { transform: translate(1px, -7px) rotate(3.5deg); } 80% { transform: translate(5px, -2px) rotate(1.5deg); } 82% { transform: translate(-1px, 5px) rotate(0.5deg); } 84% { transform: translate(-7px, 0px) rotate(2.5deg); } 86% { transform: translate(7px, -1px) rotate(3.5deg); } 88% { transform: translate(8px, -9px) rotate(0.5deg); } 90% { transform: translate(10px, -6px) rotate(2.5deg); } 92% { transform: translate(-7px, 2px) rotate(0.5deg); } 94% { transform: translate(3px, -7px) rotate(3.5deg); } 96% { transform: translate(-8px, 0px) rotate(-2.5deg); } 98% { transform: translate(-4px, -7px) rotate(0.5deg); } } @keyframes shake-hard { 0% { transform: translate(0px, 0px) rotate(0deg); } 2% { transform: translate(8px, 8px) rotate(-0.5deg); } 4% { transform: translate(8px, 8px) rotate(1.5deg); } 6% { transform: translate(6px, 8px) rotate(1.5deg); } 8% { transform: translate(3px, -2px) rotate(0.5deg); } 10% { transform: translate(3px, -8px) rotate(-2.5deg); } 12% { transform: translate(-7px, 3px) rotate(1.5deg); } 14% { transform: translate(0px, -2px) rotate(-0.5deg); } 16% { transform: translate(-8px, -9px) rotate(-2.5deg); } 18% { transform: translate(7px, 8px) rotate(2.5deg); } 20% { transform: translate(-2px, 7px) rotate(-0.5deg); } 22% { transform: translate(8px, 8px) rotate(1.5deg); } 24% { transform: translate(-3px, -2px) rotate(-0.5deg); } 26% { transform: translate(-2px, 8px) rotate(-1.5deg); } 28% { transform: translate(6px, 10px) rotate(1.5deg); } 30% { transform: translate(9px, 1px) rotate(3.5deg); } 32% { transform: translate(3px, -7px) rotate(1.5deg); } 34% { transform: translate(-7px, -7px) rotate(-2.5deg); } 36% { transform: translate(-1px, 8px) rotate(-0.5deg); } 38% { transform: translate(0px, -5px) rotate(3.5deg); } 40% { transform: translate(-9px, 0px) rotate(-2.5deg); } 42% { transform: translate(9px, -3px) rotate(-2.5deg); } 44% { transform: translate(-9px, -1px) rotate(0.5deg); } 46% { transform: translate(5px, 10px) rotate(1.5deg); } 48% { transform: translate(2px, 7px) rotate(2.5deg); } 50% { transform: translate(7px, -2px) rotate(-0.5deg); } 52% { transform: translate(1px, 2px) rotate(0.5deg); } 54% { transform: translate(5px, -1px) rotate(0.5deg); } 56% { transform: translate(-9px, 6px) rotate(3.5deg); } 58% { transform: translate(-1px, -6px) rotate(1.5deg); } 60% { transform: translate(-1px, -8px) rotate(2.5deg); } 62% { transform: translate(8px, -9px) rotate(-2.5deg); } 64% { transform: translate(10px, 2px) rotate(1.5deg); } 66% { transform: translate(2px, 5px) rotate(-1.5deg); } 68% { transform: translate(7px, 8px) rotate(-0.5deg); } 70% { transform: translate(-1px, 1px) rotate(-2.5deg); } 72% { transform: translate(4px, -1px) rotate(0.5deg); } 74% { transform: translate(-3px, 1px) rotate(-2.5deg); } 76% { transform: translate(6px, 10px) rotate(-1.5deg); } 78% { transform: translate(6px, 0px) rotate(1.5deg); } 80% { transform: translate(9px, 0px) rotate(0.5deg); } 82% { transform: translate(8px, 10px) rotate(-2.5deg); } 84% { transform: translate(4px, -2px) rotate(0.5deg); } 86% { transform: translate(1px, 4px) rotate(-0.5deg); } 88% { transform: translate(2px, 3px) rotate(0.5deg); } 90% { transform: translate(-2px, 8px) rotate(1.5deg); } 92% { transform: translate(3px, 10px) rotate(-1.5deg); } 94% { transform: translate(2px, -2px) rotate(-0.5deg); } 96% { transform: translate(-3px, 10px) rotate(1.5deg); } 98% { transform: translate(4px, 6px) rotate(-2.5deg); } } @keyframes shake-horizontal { 0% { transform: translate(0px, 0px) rotate(0deg); } 2% { transform: translate(-1px, 0px) rotate(0deg); } 4% { transform: translate(-6px, 0px) rotate(0deg); } 6% { transform: translate(-5px, 0px) rotate(0deg); } 8% { transform: translate(1px, 0px) rotate(0deg); } 10% { transform: translate(-9px, 0px) rotate(0deg); } 12% { transform: translate(-3px, 0px) rotate(0deg); } 14% { transform: translate(1px, 0px) rotate(0deg); } 16% { transform: translate(3px, 0px) rotate(0deg); } 18% { transform: translate(-7px, 0px) rotate(0deg); } 20% { transform: translate(6px, 0px) rotate(0deg); } 22% { transform: translate(1px, 0px) rotate(0deg); } 24% { transform: translate(2px, 0px) rotate(0deg); } 26% { transform: translate(3px, 0px) rotate(0deg); } 28% { transform: translate(8px, 0px) rotate(0deg); } 30% { transform: translate(8px, 0px) rotate(0deg); } 32% { transform: translate(0px, 0px) rotate(0deg); } 34% { transform: translate(-7px, 0px) rotate(0deg); } 36% { transform: translate(-9px, 0px) rotate(0deg); } 38% { transform: translate(-4px, 0px) rotate(0deg); } 40% { transform: translate(-8px, 0px) rotate(0deg); } 42% { transform: translate(10px, 0px) rotate(0deg); } 44% { transform: translate(10px, 0px) rotate(0deg); } 46% { transform: translate(-7px, 0px) rotate(0deg); } 48% { transform: translate(7px, 0px) rotate(0deg); } 50% { transform: translate(-4px, 0px) rotate(0deg); } 52% { transform: translate(10px, 0px) rotate(0deg); } 54% { transform: translate(-9px, 0px) rotate(0deg); } 56% { transform: translate(-8px, 0px) rotate(0deg); } 58% { transform: translate(6px, 0px) rotate(0deg); } 60% { transform: translate(-7px, 0px) rotate(0deg); } 62% { transform: translate(-4px, 0px) rotate(0deg); } 64% { transform: translate(-3px, 0px) rotate(0deg); } 66% { transform: translate(7px, 0px) rotate(0deg); } 68% { transform: translate(3px, 0px) rotate(0deg); } 70% { transform: translate(-7px, 0px) rotate(0deg); } 72% { transform: translate(8px, 0px) rotate(0deg); } 74% { transform: translate(-7px, 0px) rotate(0deg); } 76% { transform: translate(4px, 0px) rotate(0deg); } 78% { transform: translate(8px, 0px) rotate(0deg); } 80% { transform: translate(7px, 0px) rotate(0deg); } 82% { transform: translate(0px, 0px) rotate(0deg); } 84% { transform: translate(1px, 0px) rotate(0deg); } 86% { transform: translate(3px, 0px) rotate(0deg); } 88% { transform: translate(-8px, 0px) rotate(0deg); } 90% { transform: translate(9px, 0px) rotate(0deg); } 92% { transform: translate(-3px, 0px) rotate(0deg); } 94% { transform: translate(6px, 0px) rotate(0deg); } 96% { transform: translate(-9px, 0px) rotate(0deg); } 98% { transform: translate(10px, 0px) rotate(0deg); } } @keyframes shake-vertical { 0% { transform: translate(0px, 0px) rotate(0deg); } 2% { transform: translate(0px, -6px) rotate(0deg); } 4% { transform: translate(0px, -9px) rotate(0deg); } 6% { transform: translate(0px, 2px) rotate(0deg); } 8% { transform: translate(0px, 8px) rotate(0deg); } 10% { transform: translate(0px, 8px) rotate(0deg); } 12% { transform: translate(0px, 9px) rotate(0deg); } 14% { transform: translate(0px, -8px) rotate(0deg); } 16% { transform: translate(0px, -7px) rotate(0deg); } 18% { transform: translate(0px, -3px) rotate(0deg); } 20% { transform: translate(0px, -8px) rotate(0deg); } 22% { transform: translate(0px, -7px) rotate(0deg); } 24% { transform: translate(0px, 5px) rotate(0deg); } 26% { transform: translate(0px, 1px) rotate(0deg); } 28% { transform: translate(0px, 6px) rotate(0deg); } 30% { transform: translate(0px, -9px) rotate(0deg); } 32% { transform: translate(0px, 0px) rotate(0deg); } 34% { transform: translate(0px, -2px) rotate(0deg); } 36% { transform: translate(0px, -7px) rotate(0deg); } 38% { transform: translate(0px, 8px) rotate(0deg); } 40% { transform: translate(0px, -9px) rotate(0deg); } 42% { transform: translate(0px, -2px) rotate(0deg); } 44% { transform: translate(0px, -5px) rotate(0deg); } 46% { transform: translate(0px, -3px) rotate(0deg); } 48% { transform: translate(0px, -4px) rotate(0deg); } 50% { transform: translate(0px, -2px) rotate(0deg); } 52% { transform: translate(0px, 4px) rotate(0deg); } 54% { transform: translate(0px, -7px) rotate(0deg); } 56% { transform: translate(0px, -5px) rotate(0deg); } 58% { transform: translate(0px, 7px) rotate(0deg); } 60% { transform: translate(0px, -5px) rotate(0deg); } 62% { transform: translate(0px, -9px) rotate(0deg); } 64% { transform: translate(0px, -5px) rotate(0deg); } 66% { transform: translate(0px, -4px) rotate(0deg); } 68% { transform: translate(0px, 0px) rotate(0deg); } 70% { transform: translate(0px, -4px) rotate(0deg); } 72% { transform: translate(0px, -8px) rotate(0deg); } 74% { transform: translate(0px, 2px) rotate(0deg); } 76% { transform: translate(0px, -5px) rotate(0deg); } 78% { transform: translate(0px, -6px) rotate(0deg); } 80% { transform: translate(0px, -5px) rotate(0deg); } 82% { transform: translate(0px, 7px) rotate(0deg); } 84% { transform: translate(0px, 7px) rotate(0deg); } 86% { transform: translate(0px, -2px) rotate(0deg); } 88% { transform: translate(0px, -4px) rotate(0deg); } 90% { transform: translate(0px, -2px) rotate(0deg); } 92% { transform: translate(0px, 1px) rotate(0deg); } 94% { transform: translate(0px, 6px) rotate(0deg); } 96% { transform: translate(0px, -7px) rotate(0deg); } 98% { transform: translate(0px, -5px) rotate(0deg); } } @keyframes shake-rotate { 0% { transform: translate(0px, 0px) rotate(0deg); } 2% { transform: translate(0px, 0px) rotate(-2.5deg); } 4% { transform: translate(0px, 0px) rotate(5.5deg); } 6% { transform: translate(0px, 0px) rotate(1.5deg); } 8% { transform: translate(0px, 0px) rotate(2.5deg); } 10% { transform: translate(0px, 0px) rotate(-2.5deg); } 12% { transform: translate(0px, 0px) rotate(5.5deg); } 14% { transform: translate(0px, 0px) rotate(-1.5deg); } 16% { transform: translate(0px, 0px) rotate(4.5deg); } 18% { transform: translate(0px, 0px) rotate(-4.5deg); } 20% { transform: translate(0px, 0px) rotate(-0.5deg); } 22% { transform: translate(0px, 0px) rotate(3.5deg); } 24% { transform: translate(0px, 0px) rotate(-3.5deg); } 26% { transform: translate(0px, 0px) rotate(-5.5deg); } 28% { transform: translate(0px, 0px) rotate(-5.5deg); } 30% { transform: translate(0px, 0px) rotate(2.5deg); } 32% { transform: translate(0px, 0px) rotate(-5.5deg); } 34% { transform: translate(0px, 0px) rotate(0.5deg); } 36% { transform: translate(0px, 0px) rotate(2.5deg); } 38% { transform: translate(0px, 0px) rotate(0.5deg); } 40% { transform: translate(0px, 0px) rotate(5.5deg); } 42% { transform: translate(0px, 0px) rotate(-2.5deg); } 44% { transform: translate(0px, 0px) rotate(0.5deg); } 46% { transform: translate(0px, 0px) rotate(-0.5deg); } 48% { transform: translate(0px, 0px) rotate(-4.5deg); } 50% { transform: translate(0px, 0px) rotate(-5.5deg); } 52% { transform: translate(0px, 0px) rotate(-2.5deg); } 54% { transform: translate(0px, 0px) rotate(-5.5deg); } 56% { transform: translate(0px, 0px) rotate(4.5deg); } 58% { transform: translate(0px, 0px) rotate(-5.5deg); } 60% { transform: translate(0px, 0px) rotate(-4.5deg); } 62% { transform: translate(0px, 0px) rotate(3.5deg); } 64% { transform: translate(0px, 0px) rotate(-0.5deg); } 66% { transform: translate(0px, 0px) rotate(6.5deg); } 68% { transform: translate(0px, 0px) rotate(-4.5deg); } 70% { transform: translate(0px, 0px) rotate(5.5deg); } 72% { transform: translate(0px, 0px) rotate(-4.5deg); } 74% { transform: translate(0px, 0px) rotate(-4.5deg); } 76% { transform: translate(0px, 0px) rotate(-0.5deg); } 78% { transform: translate(0px, 0px) rotate(-3.5deg); } 80% { transform: translate(0px, 0px) rotate(-3.5deg); } 82% { transform: translate(0px, 0px) rotate(0.5deg); } 84% { transform: translate(0px, 0px) rotate(7.5deg); } 86% { transform: translate(0px, 0px) rotate(1.5deg); } 88% { transform: translate(0px, 0px) rotate(2.5deg); } 90% { transform: translate(0px, 0px) rotate(-0.5deg); } 92% { transform: translate(0px, 0px) rotate(-0.5deg); } 94% { transform: translate(0px, 0px) rotate(-4.5deg); } 96% { transform: translate(0px, 0px) rotate(3.5deg); } 98% { transform: translate(0px, 0px) rotate(-3.5deg); } } @keyframes shake-opacity { 0% { transform: translate(0px, 0px) rotate(0deg); opacity: 0.7; } 10% { transform: translate(1px, 1px) rotate(2.5deg); opacity: 0.1; } 20% { transform: translate(4px, 3px) rotate(-1.5deg); opacity: 0.5; } 30% { transform: translate(-3px, -2px) rotate(2.5deg); opacity: 0.3; } 40% { transform: translate(1px, 3px) rotate(2.5deg); opacity: 0.2; } 50% { transform: translate(-3px, 5px) rotate(0.5deg); opacity: 0.3; } 60% { transform: translate(-2px, 0px) rotate(-0.5deg); opacity: 0.7; } 70% { transform: translate(2px, 0px) rotate(-0.5deg); opacity: 0.7; } 80% { transform: translate(-4px, 1px) rotate(1.5deg); opacity: 0.4; } 90% { transform: translate(0px, 4px) rotate(2.5deg); opacity: 0.4; } } @keyframes shake-crazy { 0% { transform: translate(0px, 0px) rotate(0deg); opacity: 0.6; } 10% { transform: translate(-10px, -13px) rotate(-8deg); opacity: 0.7; } 20% { transform: translate(16px, 10px) rotate(3deg); opacity: 0.1; } 30% { transform: translate(0px, -5px) rotate(-3deg); opacity: 0.9; } 40% { transform: translate(-5px, -6px) rotate(3deg); opacity: 0.8; } 50% { transform: translate(0px, -10px) rotate(-6deg); opacity: 0.8; } 60% { transform: translate(-12px, 7px) rotate(-1deg); opacity: 0.1; } 70% { transform: translate(-14px, 1px) rotate(1deg); opacity: 0.2; } 80% { transform: translate(-10px, 17px) rotate(-1deg); opacity: 0.7; } 90% { transform: translate(18px, -9px) rotate(9deg); opacity: 0.2; } } /* apply a natural box layout model to all elements */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } body { background: #2ab8ac; } header { width: 100%; background-color: #ffab52; text-align: center; line-height: 1.5em; font-family: 'Gentium Basic', serif; padding: 5px 0; font-size: .85em; opacity: 0; color: #fff68d; visibility: hidden; animation: op 15s forwards; } header a { text-decoration: none; color: rgba(0, 0, 0, 0.7); } header a:hover { color: rgba(0, 0, 0, 0.94); } @keyframes op { 10%,90% { opacity: 1; visibility: visible; } } .section { color: white; text-align: center; height: 100%; padding-top: 20px; } .section h1 { font-family: 'Dancing Script', cursive; font-size: 5em; } .section h4 { font-size: 1.4em; font-family: 'Gentium Basic', serif; } .section > p { margin-top: 25px; line-height: 1.5em; } .section a { color: rgba(0, 0, 0, 0.5); } .section a:link { text-decoration: none; } .section a:hover { color: rgba(0, 0, 0, 0.85); } .section footer { width: 100%; line-height: 1.3em; margin-top: 50px; margin-bottom: 20px; } .arrow { position: absolute; bottom: 20px; left: 50%; margin-left: -10px; width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 15px solid rgba(255, 255, 255, 0.3); cursor: pointer; } .arrow:before { content: ''; position: absolute; top: -15px; left: -8px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; } .section.shamrock .arrow:before { border-top: 10px solid #2ab8ac; } .section.carrot .arrow:before { border-top: 10px solid #ffab52; } .section.amethyst .arrow:before { border-top: 10px solid #9c55a5; } .section.scooter .arrow:before { border-top: 10px solid #57cadd; } .section.dolly .arrow:before { border-top: 10px solid #fff68d; } .section.shamrock .arrow:before { border-top: 10px solid #2ab8ac; } .section.pear .arrow:before { border-top: 10px solid #cce033; } .section.carrot { background-color: #ffab52; } .section.amethyst { background-color: #9c55a5; } .section.scooter { background-color: #57cadd; } .section.dolly { background-color: #fff68d; color: #2C3E50; } .section.shamrock { background-color: #2ab8ac; } .section.pear { background-color: #cce033; } .color-carrot { color: #ffab52; } .color-amethyst { color: #9c55a5; } .color-scooter { color: #57cadd; } .color-dolly { color: #fff68d; } .color-shamrock { color: #2ab8ac; } .color-pear { color: #cce033; } .previews { display: block; list-style: none; width: 85%; margin: 34px auto 0; } .previews li { display: inline-block; width: 150px; padding: 20px; vertical-align: middle; } .previews.bigs li { width: 250px; } .preview-item { font-family: 'Dancing Script', cursive; font-size: 70px; line-height: 100px; position: relative; width: 100px; height: 100px; border-radius: 15px; color: rgba(255, 255, 255, 0.3); margin: auto; } .preview-item.big { width: 200px; height: 200px; font-size: 160px; line-height: 200px; } .section.carrot .preview-item { background-color: #ffc485; } .section.amethyst .preview-item { background-color: #b075b8; } .section.scooter .preview-item { background-color: #81d7e6; } .section.dolly .preview-item { background-color: #fffac0; } .section.shamrock .preview-item { background-color: #41d4c7; } .section.pear .preview-item { background-color: #d7e75f; } .preview-item:after { content: ""; width: 0; height: 0; border-left: 33px solid transparent; position: absolute; bottom: 0px; right: 0px; } .section.carrot .preview-item:after { border-bottom: 33px solid #ffab52; } .section.amethyst .preview-item:after { border-bottom: 33px solid #9c55a5; } .section.scooter .preview-item:after { border-bottom: 33px solid #57cadd; } .section.dolly .preview-item:after { border-bottom: 33px solid #fff68d; } .section.shamrock .preview-item:after { border-bottom: 33px solid #2ab8ac; } .section.pear .preview-item:after { border-bottom: 33px solid #cce033; } .flip { position: absolute; right: 0; bottom: 0; width: 0; height: 0; border-right: 30px solid transparent; } .section.carrot .flip { border-top: 30px solid #ffd09f; } .section.amethyst .flip { border-top: 30px solid #ba86c1; } .section.scooter .flip { border-top: 30px solid #97deea; } .section.dolly .flip { border-top: 30px solid #fffcda; } .section.shamrock .flip { border-top: 30px solid #56d8cd; } .section.pear .flip { border-top: 30px solid #ddea75; } .flip:after { content: ""; width: 0; height: 0; border-bottom: 30px solid rgba(0, 0, 0, 0.15); border-left: 30px solid transparent; position: absolute; bottom: 0; left: -30px; } .preview-desc { margin-top: 20px; font-family: 'Gentium Basic', serif; } .dropdown { position: relative; margin: 25px auto; height: 50px; width: 300px; } .dropdown::after { content: "➘"; position: absolute; right: 11px; top: 13px; color: rgba(0, 0, 0, 0.2); font-size: 25px; } .dropdown-select { position: relative; width: 100%; margin: 0; padding: 6px 8px 6px 10px; height: 50px; line-height: 25px; font-family: 'Dancing Script', cursive; font-size: 25px; color: rgba(0, 0, 0, 0.5); background-color: rgba(255, 255, 255, 0.1); transition: background-color .3s; border: none; outline: none; border: 0; border-radius: 0; -webkit-appearance: none; } .dropdown-select:hover, .dropdown-select:active { background-color: rgba(255, 255, 255, 0.5); } .dropdown-select > option { margin: 3px; padding: 6px 8px; text-shadow: none; border-radius: 3px; cursor: pointer; } .btn { font-family: 'Dancing Script', cursive; font-size: 40px; padding: 10px 20px; margin-top: 34px; display: inline-block; transition: background-color, .3s; } .btn.carrot { background-color: #ffab52; } .btn.amethyst { background-color: #9c55a5; } .btn.light:hover { background-color: rgba(0, 0, 0, 0.1); } .btn + small { font-family: 'Gentium Basic', serif; font-size: 16px; margin-top: 10px; display: block; } </style></head><body> <header class="new"> Did you tried to add <a href="https://codepen.io/elrumordelaluz/full/pHKcC?harlem=shake">?harlem=shake</a> at the end of the Pen url? </header> <section class="section shamrock"> <h1>CS<span class="shake shake-delay">Shake</span></h1> <h4>Some CSS classes to <span class="shake">move your DOM!</span></h4> <ul class="previews"> <li> <i class="preview-item shake"> Bs <span class="flip"></span> </i> <p class="preview-desc">Basic Shake</p> </li> <li> <i class="preview-item shake shake-slow"> Ss <span class="flip"></span> </i> <p class="preview-desc">Slow Shake</p> </li> <li> <i class="preview-item shake shake-little"> Ls <span class="flip"></span> </i> <p class="preview-desc">Little Shake</p> </li> <li> <i class="preview-item shake shake-hard"> Hs <span class="flip"></span> </i> <p class="preview-desc">Hard Shake</p> </li> <li> <i class="preview-item shake shake-horizontal"> ⇄ <span class="flip"></span> </i> <p class="preview-desc">Fixed Horizontal</p> </li> <li> <i class="preview-item shake shake-vertical"> ⇵ <span class="flip"></span> </i> <p class="preview-desc">Fixed Vertical</p> </li> <li> <i class="preview-item shake shake-rotate"> ↻ <span class="flip"></span> </i> <p class="preview-desc">Fixed Rotation</p> </li> <li> <i class="preview-item shake shake-opacity"> Os <span class="flip"></span> </i> <p class="preview-desc">Opacity Shake</p> </li> <li> <i class="preview-item shake shake-crazy"> ✌ <span class="flip"></span> </i> <p class="preview-desc">Crazy Shake</p> </li> <li> <i class="preview-item shake shake-constant"> ℇ <span class="flip"></span> </i> <p class="preview-desc">Constant Shake</p> </li> </ul> <footer>Made with <span class="shake shake-slow shake-constant">♥</span> by <a class="shake shake-constant hover-stop" href="https://twitter.com/elrumordelaluz">@elrumordelaluz</a>, using <a href="http://sass-lang.com/">Sass</a><br>Full project page <a href="https://elrumordelaluz.github.io/csshake">elrumordelaluz.github.io/csshake</a> </footer> </section> <audio id="track" preload="auto"> <source src="http://elrumordelaluz.com/audio/harlemshake.ogg" type="audio/ogg"> <source src="http://elrumordelaluz.com/audio/harlemshake.mp3" type="audio/mpeg"> </audio> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script>var params = window.location.search.substring(1).split('='); if(params[0] == 'harlem' && params[1] == 'shake') { var harlemShake = false; var obj = document.getElementById('track'); obj.addEventListener('timeupdate', checkTime, false) obj.play(); $('.new').hide(); } if(params[0] == 'shake' && params[1] == 'terrible') { $('body').addClass('shake shake-hard shake-constant'); } function checkTime() { var cur = obj.currentTime; var timeRemaining = obj.duration - obj.currentTime; if (cur > 15 && !harlemShake) { $('.shake').addClass('shake-constant'); $('.preview-desc, h4').addClass('shake shake-hard shake-constant'); harlemShake = true; } if (cur > 30) { $('.shake').removeClass('shake-constant'); $('#track').animate({volume: 0}, 5000); harlemShake = true; } }</script> <script >// nope... // New! easter egg: add ?harlem=shake as params at the end of the pen url like: // https://codepen.io/elrumordelaluz/pen/pHKcC?harlem=shake //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: