Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h1>Reminders icon hover effect</h1>
<span class="init"></span>
<p>Recreating the similar effect from original Apple video of OS X Yosemite.</p>

<div id="overlay">
	<img src="https://s14.postimg.cc/3ny2wo3ch/clouds.png" width="1200" height="670" alt="animated clouds">
	<img src="https://s14.postimg.cc/3ny2wo3ch/clouds.png" width="1200" height="670" alt="animated clouds" class="clouds-delay">
</div>

<div id="hover-me"> Hover me
	<div class="trans" id="base-black"></div>
	<div class="trans" id="base-white">
		<div class="border dot-1"><span class="dots orange"></span></div>
		<span class="line line-1"></span>

		<div class="border dot-2"><span class="dots blu"></span></div>
		<span class="line line-2"></span>

		<div class="border dot-3"><span class="dots green"></span></div>
		<span class="line line-3"></span>

		<div class="border dot-4"><span class="dots violet"></span></div>
		<span class="line line-4"></span>
		<span class="line line-5"></span>
	</div>
</div>
              
            
!

CSS

              
                /*
  Matteo B. Venice. IT
*/

@import url(https://fonts.googleapis.com/css?family=Raleway:100,200);

html, body, div, span, h1, h2, h3, h4, h5, h6, 
p, a, em, font, img, small, ol, ul, li, form, 
article, figcaption, figure, header, nav, section {  
	margin: 0; 
	padding: 0; 
}

img {
	border: none;
}

html, body {
	height: 100%;
}

body {
	font-family: 'Raleway', sans-serif;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	background: url("https://s14.postimg.cc/5sifxmmxt/hero_yosemite.jpg") no-repeat center;
	background-size: cover;

	color: #f4f4f4;
}

h1 {
	position: relative;
	top: 10%;
	font-size: 2.85em;
	font-weight: 200;
	text-align: center;
	text-transform: uppercase;
	opacity: 0;
	z-index: 100;
}

.init {
	display: block;
	position: relative;
	top: 23%;
	margin: 0 auto;
	height: 2px;
	width: 0px;
	background-color: #f4f4f4;
	z-index: 100;
}

p {
	position: relative;
	top: 28%;
	font-size: 1.25em;
	font-weight: normal;
	text-align: center;
	margin: 5px;
	z-index: 100;
	display: none;
}

#overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	-webkit-user-select: none;
	z-index: 10;
}

img {
	position: absolute;
	right: 0;
	bottom: 0;
	-webkit-animation: clouds 80s ease infinite;
	animation: clouds 80s ease infinite; 
	z-index: 1;
}

.clouds-delay {
	right: -1200px;
	-webkit-animation-delay: 20s;
	animation-delay: 20s;
}

@-webkit-keyframes clouds {

0% {
	-webkit-transform: translateX(0%);
	transform: translateX(0%);
}
	
100% {
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
	opacity: 0.7;
}

}

@keyframes clouds {

0% {
	-webkit-transform: translateX(0%);
	transform: translateX(0%);
}
	
100% {
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
	opacity: 0.7;
}

}

#hover-me {
	position: relative;
	top: 50%;
	margin: -63px auto;
	width: 106px;
	height: 126px;
	border: 1px solid rgba(255,255,255,0.42);
  -webkit-border-radius: 12px;
	border-radius: 12px;
	cursor: pointer;
	font-size: .92em;
	text-align: center;
	line-height: 126px;
	-webkit-transform: rotate(-11deg);
	transform: rotate(-11deg);
	z-index: 20;
	display: none;
}

#base-black {
	position: absolute;
	top: 0;
	left: 0;
	width: 106px;
	height: 126px;
	background-color: #313031;
  -webkit-border-radius: 12px;
	border-radius: 12px;
	box-shadow: 
	0px 0px 0 #201f20,
	1px 1px 0 #201f20,
	2px 2px 0 #1f1e1f,
	2px 3px 15px rgba(221,218,218,.14);
}

#base-white {
	position:absolute;
	top: 0;
	left: 3px;
	right: 3px;
	bottom: 1px;
	width: 102px;
	height: 122px;
	background-color: #fff;
  -webkit-border-radius: 12px;
	border-radius: 12px;
	box-shadow: 
	0px 0px 0 #b4b3b3,
	0px 1px 0 #b4b3b3,
	0px 2px 0 #a4a2a2,
	2px 3px 3px rgba(0,0,0,.4),
	inset 2px -3px 12px #dddada;
	-webkit-transition-delay: .15s;
	transition-delay: .15s;
}

.trans {
	pointer-events: none;
	-webkit-transform: translateY(126px);
	transform: translateY(126px);
	-webkit-transition: all .55s cubic-bezier(.47,.9,.2,.87);
	transition: all .55s cubic-bezier(.47,.9,.2,.87);
	opacity: 0;
}

.border {
	position: absolute;
	bottom: 11px;
	left: 8px;
	width: 20px;
	height: 20px;
	border: 1px solid #dedede;
  -webkit-border-radius: 50%;
	border-radius: 50%;
}

.dot-1,
.dot-2,
.dot-3 {
	-webkit-transition: -webkit-transform .48s, opacity .32s cubic-bezier(.38,.14,.79,.76);
	transition: transform .48s, opacity .32s cubic-bezier(.38,.14,.79,.76);
}

.dot-1 {
	-webkit-transition-delay: .32s;
	transition-delay: .32s;
	opacity: 0;
}

.dot-2 {
	-webkit-transition-delay: .42s;
	transition-delay: .42s;
	opacity: 0;
}

.dot-3 {
	-webkit-transition-delay: .52s;
	transition-delay: .52s;
	opacity: 0;
}

.dot-4 {
	-webkit-transition: opacity .32s cubic-bezier(.38,.14,.79,.76);
	transition: opacity .32s cubic-bezier(.38,.14,.79,.76);
	-webkit-transition-delay: .62s;
	transition-delay: .62s;
	opacity: 0;
}

.dots {
	position: absolute;
	top: 2px;
	left: 2px;
	display: block;
	width: 16px;
	height: 16px;
  -webkit-border-radius: 50%;
	border-radius: 50%;
}

.orange {
	background-color: #ff9501;
}

.blu {
	background-color: #1badf7;
}

.green {
	background-color: #65da37;
}

.violet {
	background-color: #cc74e1;
}

@-webkit-keyframes jelly-dot { 
  0% { -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  1.666667% { -webkit-transform: matrix3d(0.16209, 0, 0, 0, 0, 0.16209, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.16209, 0, 0, 0, 0, 0.16209, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  3.333333% { -webkit-transform: matrix3d(0.37203, 0, 0, 0, 0, 0.37203, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.37203, 0, 0, 0, 0, 0.37203, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  5% { -webkit-transform: matrix3d(0.59804, 0, 0, 0, 0, 0.59804, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.59804, 0, 0, 0, 0, 0.59804, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.666667% { -webkit-transform: matrix3d(0.81382, 0, 0, 0, 0, 0.81382, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.81382, 0, 0, 0, 0, 0.81382, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  8.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  10% { -webkit-transform: matrix3d(1.14452, 0, 0, 0, 0, 1.14452, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.14452, 0, 0, 0, 0, 1.14452, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  11.666667% { -webkit-transform: matrix3d(1.24218, 0, 0, 0, 0, 1.24218, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.24218, 0, 0, 0, 0, 1.24218, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  13.333333% { -webkit-transform: matrix3d(1.29368, 0, 0, 0, 0, 1.29368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.29368, 0, 0, 0, 0, 1.29368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  15% { -webkit-transform: matrix3d(1.30417, 0, 0, 0, 0, 1.30417, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.30417, 0, 0, 0, 0, 1.30417, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  16.666667% { -webkit-transform: matrix3d(1.28177, 0, 0, 0, 0, 1.28177, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.28177, 0, 0, 0, 0, 1.28177, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  18.333333% { -webkit-transform: matrix3d(1.2361, 0, 0, 0, 0, 1.2361, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.2361, 0, 0, 0, 0, 1.2361, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  20% { -webkit-transform: matrix3d(1.17694, 0, 0, 0, 0, 1.17694, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.17694, 0, 0, 0, 0, 1.17694, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  21.666667% { -webkit-transform: matrix3d(1.11326, 0, 0, 0, 0, 1.11326, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.11326, 0, 0, 0, 0, 1.11326, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  23.333333% { -webkit-transform: matrix3d(1.05246, 0, 0, 0, 0, 1.05246, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05246, 0, 0, 0, 0, 1.05246, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  25% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  26.666667% { -webkit-transform: matrix3d(0.95928, 0, 0, 0, 0, 0.95928, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.95928, 0, 0, 0, 0, 0.95928, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  28.333333% { -webkit-transform: matrix3d(0.93176, 0, 0, 0, 0, 0.93176, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.93176, 0, 0, 0, 0, 0.93176, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  30% { -webkit-transform: matrix3d(0.91725, 0, 0, 0, 0, 0.91725, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.91725, 0, 0, 0, 0, 0.91725, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  31.666667% { -webkit-transform: matrix3d(0.9143, 0, 0, 0, 0, 0.9143, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.9143, 0, 0, 0, 0, 0.9143, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33.333333% { -webkit-transform: matrix3d(0.92061, 0, 0, 0, 0, 0.92061, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.92061, 0, 0, 0, 0, 0.92061, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  35% { -webkit-transform: matrix3d(0.93348, 0, 0, 0, 0, 0.93348, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.93348, 0, 0, 0, 0, 0.93348, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  36.666667% { -webkit-transform: matrix3d(0.95014, 0, 0, 0, 0, 0.95014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.95014, 0, 0, 0, 0, 0.95014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  38.333333% { -webkit-transform: matrix3d(0.96809, 0, 0, 0, 0, 0.96809, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.96809, 0, 0, 0, 0, 0.96809, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  40% { -webkit-transform: matrix3d(0.98522, 0, 0, 0, 0, 0.98522, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.98522, 0, 0, 0, 0, 0.98522, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  41.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  43.333333% { -webkit-transform: matrix3d(1.01147, 0, 0, 0, 0, 1.01147, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.01147, 0, 0, 0, 0, 1.01147, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  45% { -webkit-transform: matrix3d(1.01923, 0, 0, 0, 0, 1.01923, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.01923, 0, 0, 0, 0, 1.01923, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  46.666667% { -webkit-transform: matrix3d(1.02332, 0, 0, 0, 0, 1.02332, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.02332, 0, 0, 0, 0, 1.02332, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  48.333333% { -webkit-transform: matrix3d(1.02415, 0, 0, 0, 0, 1.02415, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.02415, 0, 0, 0, 0, 1.02415, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  50% { -webkit-transform: matrix3d(1.02237, 0, 0, 0, 0, 1.02237, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.02237, 0, 0, 0, 0, 1.02237, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  51.666667% { -webkit-transform: matrix3d(1.01874, 0, 0, 0, 0, 1.01874, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.01874, 0, 0, 0, 0, 1.01874, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  53.333333% { -webkit-transform: matrix3d(1.01405, 0, 0, 0, 0, 1.01405, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.01405, 0, 0, 0, 0, 1.01405, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  55% { -webkit-transform: matrix3d(1.00899, 0, 0, 0, 0, 1.00899, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00899, 0, 0, 0, 0, 1.00899, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  56.666667% { -webkit-transform: matrix3d(1.00417, 0, 0, 0, 0, 1.00417, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00417, 0, 0, 0, 0, 1.00417, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  58.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  60% { -webkit-transform: matrix3d(0.99677, 0, 0, 0, 0, 0.99677, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99677, 0, 0, 0, 0, 0.99677, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  61.666667% { -webkit-transform: matrix3d(0.99458, 0, 0, 0, 0, 0.99458, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99458, 0, 0, 0, 0, 0.99458, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  63.333333% { -webkit-transform: matrix3d(0.99343, 0, 0, 0, 0, 0.99343, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99343, 0, 0, 0, 0, 0.99343, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  65% { -webkit-transform: matrix3d(0.9932, 0, 0, 0, 0, 0.9932, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.9932, 0, 0, 0, 0, 0.9932, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  66.666667% { -webkit-transform: matrix3d(0.9937, 0, 0, 0, 0, 0.9937, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.9937, 0, 0, 0, 0, 0.9937, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  68.333333% { -webkit-transform: matrix3d(0.99472, 0, 0, 0, 0, 0.99472, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99472, 0, 0, 0, 0, 0.99472, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  70% { -webkit-transform: matrix3d(0.99604, 0, 0, 0, 0, 0.99604, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99604, 0, 0, 0, 0, 0.99604, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  71.666667% { -webkit-transform: matrix3d(0.99747, 0, 0, 0, 0, 0.99747, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99747, 0, 0, 0, 0, 0.99747, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  73.333333% { -webkit-transform: matrix3d(0.99883, 0, 0, 0, 0, 0.99883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99883, 0, 0, 0, 0, 0.99883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  75% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  76.666667% { -webkit-transform: matrix3d(1.00091, 0, 0, 0, 0, 1.00091, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00091, 0, 0, 0, 0, 1.00091, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  78.333333% { -webkit-transform: matrix3d(1.00153, 0, 0, 0, 0, 1.00153, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00153, 0, 0, 0, 0, 1.00153, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  80% { -webkit-transform: matrix3d(1.00185, 0, 0, 0, 0, 1.00185, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00185, 0, 0, 0, 0, 1.00185, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  81.666667% { -webkit-transform: matrix3d(1.00192, 0, 0, 0, 0, 1.00192, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00192, 0, 0, 0, 0, 1.00192, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  83.333333% { -webkit-transform: matrix3d(1.00178, 0, 0, 0, 0, 1.00178, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00178, 0, 0, 0, 0, 1.00178, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  85% { -webkit-transform: matrix3d(1.00149, 0, 0, 0, 0, 1.00149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00149, 0, 0, 0, 0, 1.00149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  86.666667% { -webkit-transform: matrix3d(1.00112, 0, 0, 0, 0, 1.00112, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00112, 0, 0, 0, 0, 1.00112, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  88.333333% { -webkit-transform: matrix3d(1.00071, 0, 0, 0, 0, 1.00071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00071, 0, 0, 0, 0, 1.00071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  90% { -webkit-transform: matrix3d(1.00033, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00033, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  91.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  93.333333% { -webkit-transform: matrix3d(0.99974, 0, 0, 0, 0, 0.99974, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99974, 0, 0, 0, 0, 0.99974, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  95% { -webkit-transform: matrix3d(0.99957, 0, 0, 0, 0, 0.99957, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99957, 0, 0, 0, 0, 0.99957, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  96.666667% { -webkit-transform: matrix3d(0.99948, 0, 0, 0, 0, 0.99948, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99948, 0, 0, 0, 0, 0.99948, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  98.333333% { -webkit-transform: matrix3d(0.99946, 0, 0, 0, 0, 0.99946, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99946, 0, 0, 0, 0, 0.99946, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}

@keyframes jelly-dot { 
  0% { -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  1.666667% { -webkit-transform: matrix3d(0.16209, 0, 0, 0, 0, 0.16209, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.16209, 0, 0, 0, 0, 0.16209, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  3.333333% { -webkit-transform: matrix3d(0.37203, 0, 0, 0, 0, 0.37203, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.37203, 0, 0, 0, 0, 0.37203, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  5% { -webkit-transform: matrix3d(0.59804, 0, 0, 0, 0, 0.59804, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.59804, 0, 0, 0, 0, 0.59804, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.666667% { -webkit-transform: matrix3d(0.81382, 0, 0, 0, 0, 0.81382, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.81382, 0, 0, 0, 0, 0.81382, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  8.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  10% { -webkit-transform: matrix3d(1.14452, 0, 0, 0, 0, 1.14452, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.14452, 0, 0, 0, 0, 1.14452, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  11.666667% { -webkit-transform: matrix3d(1.24218, 0, 0, 0, 0, 1.24218, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.24218, 0, 0, 0, 0, 1.24218, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  13.333333% { -webkit-transform: matrix3d(1.29368, 0, 0, 0, 0, 1.29368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.29368, 0, 0, 0, 0, 1.29368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  15% { -webkit-transform: matrix3d(1.30417, 0, 0, 0, 0, 1.30417, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.30417, 0, 0, 0, 0, 1.30417, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  16.666667% { -webkit-transform: matrix3d(1.28177, 0, 0, 0, 0, 1.28177, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.28177, 0, 0, 0, 0, 1.28177, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  18.333333% { -webkit-transform: matrix3d(1.2361, 0, 0, 0, 0, 1.2361, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.2361, 0, 0, 0, 0, 1.2361, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  20% { -webkit-transform: matrix3d(1.17694, 0, 0, 0, 0, 1.17694, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.17694, 0, 0, 0, 0, 1.17694, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  21.666667% { -webkit-transform: matrix3d(1.11326, 0, 0, 0, 0, 1.11326, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.11326, 0, 0, 0, 0, 1.11326, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  23.333333% { -webkit-transform: matrix3d(1.05246, 0, 0, 0, 0, 1.05246, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05246, 0, 0, 0, 0, 1.05246, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  25% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  26.666667% { -webkit-transform: matrix3d(0.95928, 0, 0, 0, 0, 0.95928, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.95928, 0, 0, 0, 0, 0.95928, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  28.333333% { -webkit-transform: matrix3d(0.93176, 0, 0, 0, 0, 0.93176, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.93176, 0, 0, 0, 0, 0.93176, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  30% { -webkit-transform: matrix3d(0.91725, 0, 0, 0, 0, 0.91725, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.91725, 0, 0, 0, 0, 0.91725, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  31.666667% { -webkit-transform: matrix3d(0.9143, 0, 0, 0, 0, 0.9143, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.9143, 0, 0, 0, 0, 0.9143, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33.333333% { -webkit-transform: matrix3d(0.92061, 0, 0, 0, 0, 0.92061, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.92061, 0, 0, 0, 0, 0.92061, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  35% { -webkit-transform: matrix3d(0.93348, 0, 0, 0, 0, 0.93348, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.93348, 0, 0, 0, 0, 0.93348, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  36.666667% { -webkit-transform: matrix3d(0.95014, 0, 0, 0, 0, 0.95014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.95014, 0, 0, 0, 0, 0.95014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  38.333333% { -webkit-transform: matrix3d(0.96809, 0, 0, 0, 0, 0.96809, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.96809, 0, 0, 0, 0, 0.96809, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  40% { -webkit-transform: matrix3d(0.98522, 0, 0, 0, 0, 0.98522, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.98522, 0, 0, 0, 0, 0.98522, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  41.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  43.333333% { -webkit-transform: matrix3d(1.01147, 0, 0, 0, 0, 1.01147, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.01147, 0, 0, 0, 0, 1.01147, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  45% { -webkit-transform: matrix3d(1.01923, 0, 0, 0, 0, 1.01923, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.01923, 0, 0, 0, 0, 1.01923, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  46.666667% { -webkit-transform: matrix3d(1.02332, 0, 0, 0, 0, 1.02332, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.02332, 0, 0, 0, 0, 1.02332, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  48.333333% { -webkit-transform: matrix3d(1.02415, 0, 0, 0, 0, 1.02415, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.02415, 0, 0, 0, 0, 1.02415, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  50% { -webkit-transform: matrix3d(1.02237, 0, 0, 0, 0, 1.02237, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.02237, 0, 0, 0, 0, 1.02237, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  51.666667% { -webkit-transform: matrix3d(1.01874, 0, 0, 0, 0, 1.01874, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.01874, 0, 0, 0, 0, 1.01874, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  53.333333% { -webkit-transform: matrix3d(1.01405, 0, 0, 0, 0, 1.01405, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.01405, 0, 0, 0, 0, 1.01405, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  55% { -webkit-transform: matrix3d(1.00899, 0, 0, 0, 0, 1.00899, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00899, 0, 0, 0, 0, 1.00899, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  56.666667% { -webkit-transform: matrix3d(1.00417, 0, 0, 0, 0, 1.00417, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00417, 0, 0, 0, 0, 1.00417, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  58.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  60% { -webkit-transform: matrix3d(0.99677, 0, 0, 0, 0, 0.99677, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99677, 0, 0, 0, 0, 0.99677, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  61.666667% { -webkit-transform: matrix3d(0.99458, 0, 0, 0, 0, 0.99458, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99458, 0, 0, 0, 0, 0.99458, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  63.333333% { -webkit-transform: matrix3d(0.99343, 0, 0, 0, 0, 0.99343, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99343, 0, 0, 0, 0, 0.99343, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  65% { -webkit-transform: matrix3d(0.9932, 0, 0, 0, 0, 0.9932, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.9932, 0, 0, 0, 0, 0.9932, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  66.666667% { -webkit-transform: matrix3d(0.9937, 0, 0, 0, 0, 0.9937, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.9937, 0, 0, 0, 0, 0.9937, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  68.333333% { -webkit-transform: matrix3d(0.99472, 0, 0, 0, 0, 0.99472, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99472, 0, 0, 0, 0, 0.99472, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  70% { -webkit-transform: matrix3d(0.99604, 0, 0, 0, 0, 0.99604, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99604, 0, 0, 0, 0, 0.99604, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  71.666667% { -webkit-transform: matrix3d(0.99747, 0, 0, 0, 0, 0.99747, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99747, 0, 0, 0, 0, 0.99747, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  73.333333% { -webkit-transform: matrix3d(0.99883, 0, 0, 0, 0, 0.99883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99883, 0, 0, 0, 0, 0.99883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  75% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  76.666667% { -webkit-transform: matrix3d(1.00091, 0, 0, 0, 0, 1.00091, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00091, 0, 0, 0, 0, 1.00091, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  78.333333% { -webkit-transform: matrix3d(1.00153, 0, 0, 0, 0, 1.00153, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00153, 0, 0, 0, 0, 1.00153, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  80% { -webkit-transform: matrix3d(1.00185, 0, 0, 0, 0, 1.00185, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00185, 0, 0, 0, 0, 1.00185, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  81.666667% { -webkit-transform: matrix3d(1.00192, 0, 0, 0, 0, 1.00192, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00192, 0, 0, 0, 0, 1.00192, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  83.333333% { -webkit-transform: matrix3d(1.00178, 0, 0, 0, 0, 1.00178, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00178, 0, 0, 0, 0, 1.00178, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  85% { -webkit-transform: matrix3d(1.00149, 0, 0, 0, 0, 1.00149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00149, 0, 0, 0, 0, 1.00149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  86.666667% { -webkit-transform: matrix3d(1.00112, 0, 0, 0, 0, 1.00112, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00112, 0, 0, 0, 0, 1.00112, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  88.333333% { -webkit-transform: matrix3d(1.00071, 0, 0, 0, 0, 1.00071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00071, 0, 0, 0, 0, 1.00071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  90% { -webkit-transform: matrix3d(1.00033, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00033, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  91.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  93.333333% { -webkit-transform: matrix3d(0.99974, 0, 0, 0, 0, 0.99974, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99974, 0, 0, 0, 0, 0.99974, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  95% { -webkit-transform: matrix3d(0.99957, 0, 0, 0, 0, 0.99957, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99957, 0, 0, 0, 0, 0.99957, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  96.666667% { -webkit-transform: matrix3d(0.99948, 0, 0, 0, 0, 0.99948, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99948, 0, 0, 0, 0, 0.99948, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  98.333333% { -webkit-transform: matrix3d(0.99946, 0, 0, 0, 0, 0.99946, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99946, 0, 0, 0, 0, 0.99946, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}

.line {
	position: absolute;
	left: 39px;
	width: 0px;
	height: 1px;
	background-color: #dadada;
	-webkit-transition: width .45s cubic-bezier(.645, .045, .355, 1);
	transition: width .45s cubic-bezier(.645, .045, .355, 1);
}

.line-1 {
	top: 15px;
	-webkit-transition-delay: .35s;
	transition-delay: .35s;
}

.line-2 {
	top: 37px;
	-webkit-transition-delay: .45s;
	transition-delay: .45s;
}

.line-3 {
	top: 59px;
	-webkit-transition-delay: .55s;
	transition-delay: .55s;
}

.line-4 {
	bottom: 37px;
	-webkit-transition-delay: .65s;
	transition-delay: .65s;
}

.line-5 {
	bottom: 15px;
	-webkit-transition-delay: .75s;
	transition-delay: .75s;
}

#hover-me:hover {
	border: none;
}

#hover-me:hover #base-black,
#hover-me:hover #base-white {
	-webkit-transform: translateY(0px);
	transform: translateY(0px);
	opacity: 1;
}

#hover-me:hover .dot-1 {
	-webkit-transform: translate3d(0px, -74px, 0px);
	transform: translate3d(0px, -74px, 0px);
	opacity: 1;
}

#hover-me:hover .dot-2 {
	-webkit-transform: translate3d(0px, -49px, 0px);
	transform: translate3d(0px, -49px, 0px);
	opacity: 1;
}

#hover-me:hover .dot-3 {
	-webkit-transform: translate3d(0px, -24px, 0px);
	transform: translate3d(0px, -24px, 0px);
	opacity: 1;
}

#hover-me:hover .dot-4 {
	opacity: 1;
}

#hover-me:hover .orange,
#hover-me:hover .green,
#hover-me:hover .blu,
#hover-me:hover .violet {
	-webkit-animation: jelly-dot 1.8s linear;
	animation: jelly-dot 1.8s linear;
}

#hover-me:hover .orange {
	-webkit-animation-delay: .38s;
	animation-delay: .38s;
}

#hover-me:hover .green {
	-webkit-animation-delay: .48s;
	animation-delay: .48s;
}

#hover-me:hover .blue {
	-webkit-animation-delay: .58s;
	animation-delay: .58s;
}

#hover-me:hover .violet {
	-webkit-animation-delay: .68s;
	animation-delay: .68s;
}

#hover-me:hover .line {
	width: 52px;
}
              
            
!

JS

              
                $(window).load(function() {
  
  $("h1").animate({ 
    top:"20%", opacity:"1" 
   },1100,function() {
		
    $(".init").animate({ 
      width:"60px" 
     }, 600, function() {
			
       $("p").fadeIn( 
         600, function () {
				
         $("#hover-me").fadeIn( 
           700, function() {
				});
		  
       });
	  
     });
	
   });

});
              
            
!
999px

Console