<div class="wrapper">
	<div class="rollin">
	<div class="little-urn">
		<img class="little-urn__body" src="https://engage-codepen.s3.amazonaws.com/2016/little-urn/body.png">
		<div class="wheels">
			<span class="little-urn__wheel front"><img src="https://engage-codepen.s3.amazonaws.com/2016/little-urn/wheel.png"></span>
			<span class="little-urn__wheel back"><img src="https://engage-codepen.s3.amazonaws.com/2016/little-urn/wheel.png"></span>
		</div>
	</div>
	</div>
</div>
<div class="engage">
	<p>Chuggin' Van | Yorkshire Tea's Little Urn<br> by <a href="https://twitter.com/iamjamie">Jamie Wright</a> of <a href="https://engageinteractive.co.uk" class="logo">Engage</a>.</p>
</div>
$body-width: 600px;
$body-height: 268px;
$wheel: 100px;
$wheel-offset: 20px;
$wheel-right: 48px;
$wheel-left: 72px;
$van-offset: $body-width + 10px;

html {
	font-size: 10px;
	background: #eee;
}

.wrapper {
	padding: 75px 0 20px;
	margin: 0 auto;
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(210,238,255,1) 70%,rgba(174,201,108,1) 98%,rgba(51,51,51,1) 100%);
	border-bottom: .2rem solid #333;
	overflow:hidden;
}
.rollin {
	animation: rollin 2s ease-in-out infinite both;
}

.little-urn {
	backface-visibility: hidden;
	perspective: 1000;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: $body-width;
	height: $body-height + $wheel-offset;
	animation: wheelbump .3s cubic-bezier(0, 0, 0.2, 1) infinite both;

	&__body {
		width: $body-width;
		height: $body-height;
		transform-origin: 75% 75%;
		animation: suspension .6s cubic-bezier(0, 0, 0.2, 1) infinite both;
	}

	&__wheel {
		position: absolute;
		display: block;
		bottom: -$wheel-offset;
		width: $wheel;
		height: $wheel;
		transform-origin: 50% 50%;
		animation: wheelspin .8s linear infinite both;

		&.front {
			right: $wheel-right;

			img {
				animation: wheelbump .3s .15s cubic-bezier(0, 0, 0.2, 1) infinite both;
			}
		}
		
		&.back {
			left: $wheel-left;

			img {
				animation: wheelbump .3s cubic-bezier(0, 0, 0.2, 1) infinite both;
			}
		}

		img {
			display: block;
			position: absolute;
			top: 0; right: 0; left: 0; bottom: 0;
			width: $wheel;
			height: $wheel;
		}
	}
}

@keyframes suspension {
	0% { transform: rotate(-.5deg) translateY(0); }
	50% { transform: rotate(.5deg) translateY(2px); }
	100% { transform: rotate(-.5deg) translateY(0); }
}

@keyframes wheelbump {
	0% { transform: translateY(1px); }
	50% { transform: translateY(0); }
	100% { transform: translateY(1px); }
}

@keyframes wheelspin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes rollin {
	0% { transform: translateX(-1vw);}
	50%  { transform: translateX(1vw);}
	100% { transform: translateX(-1vw);}
}


@import url(https://fonts.googleapis.com/css?family=Roboto:700);

.engage {
	position: relative;
	padding: 10px;
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	color: #333;
	font-smoothing: antialiased;
	
	p {
		overflow: hidden;
		height: 50px;	
	}

	a {
		color: #333;
		text-decoration: none;
	}
	
	.logo {
		position: relative;
		top: -2.95rem;
		display: inline-block;
		height: 51px;
		width: 58px;
		line-height: 0;
		font-size: 0;
		background: url(https://engage-codepen.s3.amazonaws.com/engage-black.svg)
	}
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.