http://ericdfields.s3.amazonaws.com/hiphost/bounce/stylesheets/screen.css scss

style.scss

$duration: .75s;
$timing: linear;
$iteration: infinite;

@import "compass/css3/images";
@import "compass/css3/animation";
@import "compass/css3/transform";

$bottom-shadow-default-rotate: rotateX(82deg);
$bottom-shadow-default-scale: scale(2.5,2.5);
$bottom-shadow-default-transform: $bottom-shadow-default-rotate $bottom-shadow-default-scale;

@mixin respond-to($media) {
	@if $media == landscape {
		@media screen and (min-width: 1024px) {
			@content;
		}
	}
}

@mixin bouncer-max {
	@include transform(translate(0,-20px));
}
@include keyframes(bouncer) {
  0%, 100% {
    @include transform(translate(0,0));
  }
  35%,52% {
    @include bouncer-max;
  }
}

@mixin bouncer-shadow-max {
	@include transform($bottom-shadow-default-rotate scale(1,1) translate(0,0));	
}
@include keyframes(bouncer-shadow) {
	0%, 100% {
		@include transform($bottom-shadow-default-transform translate(0,0));
	}
	35%,65% {
		@include bouncer-shadow-max;
	}
}

@mixin bouncer-top-squish-max {
	@include transform(scale(1,1.15) translate(0, 0));
}
@include keyframes(bouncer-top-squish) {
	0%, 100% {
		@include transform(scale(1,.9) translate(0,30px));
	}
	35%,65% {
		@include transform(scale(1,1.12) translate(0, 0));		
	}
	45%,55% {
		@include bouncer-top-squish-max;
	}
}

@mixin bouncer-bottom-squish-max {
	@include transform(scale(1,1));
}
@include keyframes(bouncer-bottom-squish) {
	0%, 100% {
		@include transform(scale(1.02,.7));
	}
	35%,75% {
		@include bouncer-bottom-squish-max;
	}
}

@include keyframes(fade-in) {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

body {
	
}

h1 {
	@include animation(fade-in .75s ease-in);
	font-size: 60px;
	font-family: sans-serif;
	color: #f08901;
	text-align: center;
	text-shadow: rgba(0,0,0,.2) 0 2px 1px;
}
.bouncer-wrap {
	position: relative;
	top: 52px;
	left: -33px;
	width: 82px;
	display: inline-block;
	margin: 0 auto 50px;
	@include transform(scale(.5,.5));
	@include transform-origin(50%,100%);
	.bouncer {
		@include animation(bouncer $duration $timing $iteration);
		.top,.bottom {
			display: block;
			position: relative;
		}
		.top {
			margin-bottom: 20px;
			@include animation(bouncer-top-squish $duration $timing $iteration);
		}
		.bottom {
			left: 14px;
			@include animation(bouncer-bottom-squish $duration $timing $iteration);
			@include transform-origin(50%,80%);
		}
	}
	.bottom-shadow {
		display: block;
		width: 25px;
		height: 25px;
		@include background(radial-gradient(black,white 15px));
		border-radius: 12.5px;
		position: absolute;
		bottom: -10px;
		left: 14px;
		z-index: -1;
		@include transform($bottom-shadow-default-transform);
		opacity: .2;
		@include animation(bouncer-shadow $duration $timing $iteration);
	}
}