<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">
						&#8644;
						<span class="flip"></span>
					</i>
					<p class="preview-desc">Fixed Horizontal</p>
				</li>
				<li>
					<i class="preview-item shake shake-vertical">
						&#8693;
						<span class="flip"></span>
					</i>
					<p class="preview-desc">Fixed Vertical</p>
				</li>
				<li>
					<i class="preview-item shake shake-rotate">
						&#8635;
						<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">
						&#8455;
						<span class="flip"></span>
					</i>
					<p class="preview-desc">Constant Shake</p>
				</li>
			</ul>
  <footer>Made with <span class="shake shake-slow shake-constant">&#9829;</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>
@import "compass/css3";

@import "compass/reset";

// csshake code starts here

@mixin shake($x, $y, $rot, $name, $steps:10, $opacity:false) {
  $r:0deg;
  $h:0px;
  $v:0px; 
  
  $interval: $steps;
  $step: 0%;

  @keyframes #{$name}{ 
    @while $step < 100% {
      @if ($rot != 0deg){ $r : random($rot) - $rot/2;} 
        @else { $r : 0deg; }
      @if ($x != 0px){ $h : random($x) - $x/2; } 
        @else { $h : 0px; }
      @if ($y != 0px){ $v : random($y) - $y/2; } 
        @else { $v : 0px; }
    
      @if($step == 0%){
        #{$step} {
          transform: translate(0px, 0px) rotate(0deg);
          @if($opacity){
            opacity: random(10)*.1;
          }
        }  
      } @else {
        #{$step} {
          transform: translate($h, $v) rotate($r);
          @if($opacity){
            opacity: random(10)*.1; 
          }
        }
      }
      $step: $step + $interval;
    }

  }
}


// reset
$duration:100ms;
$base-name:shake-base;
$iteration:infinite;
$timing:ease-in-out;
$delay:0s;


// The animation
@mixin animation($name, $dur: $duration, $iter: $iteration, $tim: $timing, $del: $delay){
	animation-name: $name;
	animation-duration: $dur;
	animation-iteration-count: $iter;
	animation-timing-function: $tim;
	animation-delay: $del;
}


.shake {
	display: inline-block;
	transform-origin: center center;
	
	&:hover {
		@include animation($base-name);
	}
	
	&.freez {
		@include animation($base-name);
		&.shake-hard { @include animation(shake-hard); }
		&.shake-slow { @include animation(shake-slow, 5s); }
		&.shake-little { @include animation(shake-little); }
		&.shake-horizontal { @include animation(shake-horizontal); }
		&.shake-vertical { @include animation(shake-vertical); }
		&.shake-rotate { @include animation(shake-rotate); }
		&.shake-opacity { @include animation(shake-opacity, 200ms); }
		&.shake-crazy { @include animation(shake-crazy); }
		animation-play-state: paused;
		&:hover {
			animation-play-state: running;
		}
	}
	
	// Specific shakings
	&.shake-hard:hover { @include animation(shake-hard); }
	&.shake-slow:hover { @include animation(shake-slow, 5s); }
	&.shake-little:hover { @include animation(shake-little); }
	&.shake-horizontal:hover { @include animation(shake-horizontal); }
	&.shake-vertical:hover { @include animation(shake-vertical); }
	&.shake-rotate:hover { @include animation(shake-rotate); }
	&.shake-opacity:hover { @include animation(shake-opacity, 200ms); }
	&.shake-crazy:hover { @include animation(shake-crazy); }

	&.shake-constant { 
		@include animation($base-name);
		&.shake-hard { @include animation(shake-hard); }
		&.shake-slow { @include animation(shake-slow, 5s); }
		&.shake-little { @include animation(shake-little); }
		&.shake-horizontal { @include animation(shake-horizontal); }
		&.shake-vertical { @include animation(shake-vertical); }
		&.shake-rotate { @include animation(shake-rotate); }
		&.shake-opacity { @include animation(shake-opacity, 200ms); }
		&.shake-crazy { @include animation(shake-crazy); }
		&.hover-stop:hover{
			animation-play-state: paused;
		}
	}
	&.shake-delay { @include animation($base-name, $duration, $iteration, $timing, 4s); }

}


// The animations: its names and settings to call from animation mixin
@include shake(5px, 5px, 3deg, 'shake-base', 2);
@include shake(2px, 2px, 1deg, 'shake-little', 2);
@include shake(20px, 20px, 7deg, 'shake-slow', 2);
@include shake(20px, 20px, 7deg, 'shake-hard', 2);
@include shake(20px, 0px, 0deg, 'shake-horizontal', 2);
@include shake(0px, 20px, 0deg, 'shake-vertical', 2);
@include shake(0px, 0px, 15deg, 'shake-rotate', 2);
@include shake(10px, 10px, 5deg, 'shake-opacity', 10, true);
@include shake(40px, 40px, 20deg, 'shake-crazy', 10, true);

// csshake code ends here





// Demo code
@import url(https://fonts.googleapis.com/css?family=Gentium+Basic);
@import url(https://fonts.googleapis.com/css?family=Dancing+Script);

// Colors 
$carrot: #ffab52; 
$amethyst: #9c55a5; 
$scooter: #57cadd; 
$dolly: #fff68d; 
$shamrock: #2ab8ac; 
$pear: #cce033; 


/* 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: $shamrock;
}
header{
  width: 100%;
  background-color: $carrot;
  text-align: center;
  line-height: 1.5em;
  font-family: 'Gentium Basic', serif;
  padding: 5px 0;
  font-size: .85em;
  opacity: 0;
  color:$dolly;
  visibility: hidden;
  animation:op 15s forwards;
  a{
    text-decoration: none;
    color:rgba(0,0,0,0.7);
    &: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;
  h1 {
    font-family: 'Dancing Script', cursive;
    font-size: 5em;
  }
  h4 {
    font-size: 1.4em;
    font-family: 'Gentium Basic', serif;
  }
  & > p {
    margin-top: 25px;
    line-height: 1.5em;
  }
  a{
    color:rgba(0,0,0,0.5);
    &:link{
      text-decoration: none;
    }
    &:hover {
      color:rgba(0,0,0,0.85);
    }
  }
  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,.3);
  cursor:pointer;
  &:before {
    content: '';
    position: absolute;
    top: -15px;
    left: -8px;
    width: 0; 
    height: 0; 
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    .section.shamrock & { border-top: 10px solid $shamrock; }
    .section.carrot &{ border-top: 10px solid $carrot; }
    .section.amethyst &{ border-top: 10px solid $amethyst; }
    .section.scooter &{ border-top: 10px solid $scooter; }
    .section.dolly &{ border-top: 10px solid $dolly; }
    .section.shamrock &{ border-top: 10px solid $shamrock; }
    .section.pear &{ border-top: 10px solid $pear; }
  }
}


// Section

.section {  
  &.carrot{ background-color: $carrot; }
  &.amethyst{ background-color: $amethyst; }
  &.scooter{ background-color: $scooter; }
  &.dolly{ 
    background-color: $dolly;
    color:#2C3E50;
  }
  &.shamrock{ background-color: $shamrock; }
  &.pear{ background-color: $pear; }
}


.color-carrot{ color: $carrot; }
.color-amethyst{ color: $amethyst; }
.color-scooter{ color: $scooter; }
.color-dolly{ color: $dolly; }
.color-shamrock{ color: $shamrock; }
.color-pear{ color: $pear; }

// Previews
.previews {
  display: block;
  list-style: none;
  width: 85%;
  margin: 34px auto 0;
  li {
    display: inline-block;
    width: 150px;
    padding: 20px;
    vertical-align: middle;
  }
  &.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(white,0.3);
  &.big {
    width: 200px;
    height: 200px;
    font-size: 160px;
    line-height: 200px;
  }
  .section.carrot & { background-color: lighten($carrot,10); }
  .section.amethyst &{ background-color: lighten($amethyst,10); }
  .section.scooter &{ background-color: lighten($scooter,10); }
  .section.dolly &{ background-color: lighten($dolly,10); }
  .section.shamrock &{ background-color: lighten($shamrock,10); }
  .section.pear &{ background-color: lighten($pear,10); }
  margin: auto;
  &:after {
    content: "";
    width: 0;
    height: 0;
    .section.carrot & { border-bottom: 33px solid $carrot; }
    .section.amethyst &{ border-bottom: 33px solid $amethyst }
    .section.scooter &{ border-bottom: 33px solid $scooter }
    .section.dolly &{ border-bottom: 33px solid $dolly }
    .section.shamrock &{ border-bottom: 33px solid $shamrock }
    .section.pear &{ border-bottom: 33px solid $pear }
    border-left: 33px solid transparent;
    position: absolute;
    bottom: 0px;
    right: 0px;
  }
}

.flip {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  .section.carrot & { border-top: 30px solid lighten($carrot,15);}
  .section.amethyst & { border-top: 30px solid lighten($amethyst,15); }
  .section.scooter & { border-top: 30px solid lighten($scooter,15); }
  .section.dolly & { border-top: 30px solid lighten($dolly,15); }
  .section.shamrock & { border-top: 30px solid lighten($shamrock,15); }
  .section.pear & { border-top: 30px solid lighten($pear,15); }

  border-right: 30px solid transparent;
  &: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;
  &::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;
  &:hover, &:active {
    background-color: rgba(255,255,255,0.5);
  }
  border: 0;
  border-radius: 0;
  -webkit-appearance: none;
  & > 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;
  &.carrot{ background-color: $carrot; }
  &.amethyst{ background-color: $amethyst; }
  &.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
}
// 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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://codepen.io/elrumordelaluz/pen/kDcqz