is breathing.

dabblet.css

/**
 * is breathing.
 */

* {margin: 0; padding: 0;}
body { background: #f5f5f5;}


@-webkit-keyframes is_breathing {
	from {
		-webkit-transform: translateY(0px);
	}
	to {
		-webkit-transform: translateY(5px);
	}
}

@-webkit-keyframes is_breathing_with_arms-left {
	from {
		-webkit-transform: rotate(0deg) translateY(0px);
	}
	to {
		-webkit-transform: rotate(-5deg) translateY(2px);
	}
}

@-webkit-keyframes is_breathing_with_arms-right {
	from {
		-webkit-transform: rotate(0deg) translateY(0px);
	}
	to {
		-webkit-transform: rotate(5deg) translateY(2px);
	}
}

@-webkit-keyframes fold-leg {
	from {
		height: 40px;
	}
	to {
		height: 35px;
	}
}

@-webkit-keyframes sticky-foot {
	from {
		bottom: -9px;
	}
	to {
		bottom: -4px;
	}
}

#wrapper {
	width: 800px;
	height: 500px;
	margin: 30px auto 0;
	overflow: hidden;
}

#wrapper:before, #wrapper:after {
	display: block;
	content: "";
	width: 33px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: url(http://lab.aqro.be/orgallery/gradient-to-right.png) repeat-y 0 0;
	z-index: 10;
}

	#wrapper:after {
		left: auto;
		right: 0;
		background: url(http://lab.aqro.be/orgallery/gradient-to-left.png) repeat-y 0 0;
	}

#orgallery {
margin-top: 100px;
}

ul li {
	margin: 0 auto;
	list-style: none;
	width: 300px;
	height: 200px;
	position: relative;
	
}
.wrapper-body {position: relative; -webkit-animation: is_breathing 1.5s infinite alternate ease-in-out;}
.body {
	border-radius: 10px;
	overflow: hidden;
	border: 5px solid #5c6468;
	height: 196px;
	
}
.eyes {
	width: 130px;
	height: 30px;
	position: absolute;
	top: -12px;
	left: 50%;
	margin-left: -65px;
	z-index: 10;
	-webkit-animation: is_breathing 1.5s infinite alternate ease-in-out .75s;
}

	.eyes .left, .eyes .right {
		width: 13px;
		height: 30px;
		position: absolute;
		background: #000;
		border-radius: 7px;
		top: 0;
		left: 0;
		-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,.2);
	}
		.eyes .right {left: auto; right: 0;}
	.eyes .reflect {
		width: 5px;
		height: 15px;
		border-radius: 3px;
		display: block;
		background: #fff;
		position: absolute;
		top: 4px;
		right: 2px;
	}
	
	.arms-left, .arms-right {
		width: 50px;
		height: 55px;
		position: absolute;
		background: url(http://lab.aqro.be/orgallery/arm-left.png) no-repeat 0 0;
		top: 35%;
		left: -50px;
		-webkit-transform-origin: top right;
		-webkit-animation: is_breathing_with_arms-left 1.5s infinite alternate ease-in-out;
	}
	
		.arms-right {
			left: auto;
			right: -50px;
			-webkit-transform-origin: top left;
			-webkit-animation: is_breathing_with_arms-right 1.5s infinite alternate ease-in-out;
			background: url(http://lab.aqro.be/orgallery/arm-right.png) no-repeat 0 0;
		}
		
	
	.leg-left, .leg-right {
		width: 45px;
		height: 35px;
		position: absolute;
		left: 10px;
		top:99%;			
	}
	
		.leg-right {left: auto; right: 15px;}
	
	.leg-left img, .leg-right img {
		-webkit-animation: fold-leg 1.5s infinite alternate ease-in-out;
	}
	
	.leg-left img, .leg-right img, .foot {
		display: inline-block;
		width: 100%;
		height: 100%;
	}
	
	.foot {
		width: 28px;
		height: 6px;
		background: url(http://lab.aqro.be/orgallery/foot-left.png) no-repeat;
		position: absolute;
		bottom: -4px;
		left: 4px;
		-webkit-animation: sticky-foot 1.5s infinite alternate ease-in-out;
	}
	
	.leg-right .foot {
		left: auto;
		right: 4px;
		background: url(http://lab.aqro.be/orgallery/foot-right.png) no-repeat;
	}
	
	
	.shadow {
		width: 90%; height: 4px;
		background: rgba(0,0,0,.2);
		position: absolute;
		bottom: -48px;
		left: 50%;
		border-radius: 4px;
		margin-left: -45%;
	}

dabblet.html

<section id="wrapper">
		<section id="orgallery">
			<ul>
				<li>
					<div class="eyes">
						<div class="left"><span class="reflect"></span></div>
						<div class="right"><span class="reflect"></span></div>
					</div>
					<div class="wrapper-body">
						<div class="body"><img src="http://weknowmemes.com/wp-content/gallery/me-gusta/me-gusta-original.png" alt="img" width="100%" /></div>
						<div class="arms-left"></div>
						<div class="arms-right"></div>
						<div class="leg-left">
							<img src="http://lab.aqro.be/orgallery/leg-left.png" alt="leg-left" />
							<div class="foot"></div>
						</div>
						<div class="leg-right">
							<img src="http://lab.aqro.be/orgallery/leg-right.png" alt="leg-right" />
							<div class="foot"></div>
						</div>
					</div>
					<div class="shadow"></div>
				</li>
			</ul>
		</section>
	</section>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}