An advanced version of a CSS animation I improvised for the students in yesterday’s class, with three notable features:

• Nested animation: the second hand of the watch rotates in a circle, but also moves with the overall sway of the watch.
• vw units: the logo and animation are completely responsive thanks to the use of vw units for position and font size.
• Animated alpha masked PNGs: both the second hand and the watch itself are alpha-masked PNGs, reduced to a minimal file size through an old Adobe Fireworks trick.

The HTML:

<div id="watch">
	<img src=" pocketwatch.png" alt="Pocketwatch on chain" class="watch">
	<img src="second-hand.png" alt="Pocketwatch second hand" class="seconds">
</div>
<h1>DR. DEMENTO</h1>
<hr>
<h2>HYPNOTHERAPY SERVICES</h2>

The CSS (shown sans vendor prefixes for clarity):

@keyframes sway {
	to { transform: rotate(30deg); }
}
@keyframes fade {
	to { opacity: 1; }
}
@keyframes widen {
	to { width: 40%; }
}
@keyframes secondcount {
	to { transform: rotate(355deg); }
}
body {
	margin: 0;
	background: #111;
	color: #fff;
	text-align: center;
}
body > * { position: relative; }
#watch {
	width: 12vw;
	height: auto;
	margin: 0 auto;
	transform-origin: center top;
	transform: rotate(-30deg);
	top: -10px;
	animation: sway 2.2s infinite alternate ease-in-out;
}
#watch img.watch {
	width: 100%; height: auto;
}
img.seconds {
	position: absolute;
	width: 8%; height:auto;
	bottom: 11.75%; left: 45%;
	transform-origin: center 72.4%;
	animation: secondcount 60s infinite linear;
}
h1 {
	font-size: 10vw;
	top: -35vw;
	text-shadow: 0 0 3px 4px rgba(0,0,0,0.3);
	opacity: 0;
	animation: fade 4s 2s forwards;
}
h2 {
	font-weight: 100;
	font-size: 3vw;
	top: -20vw;
	letter-spacing: .2vw;
	opacity: 0;
	animation: fade 2s 7s forwards;
}
hr {
	border: none;
	width: 0%; color: #777;
	height: 1px;
	background-color: #777;
	top: -20vw;
	animation: widen 2s 5s forwards;
}

Finally if you are dealing with older versions of Webkit, you'll need some JavaScript to compensate for the fact that the engine did not always recognize viewport changes with respect to fonts sized in vw units:

	window.addEventListener('resize', function() {
		var demento = document.querySelector('h1');
		var services = document.querySelector('h2');
		demento.style.fontSize="10vw";
		services.style.fontSize="3vw";
})

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/xAajL