Autumn steals upon us quickly in Canada: the first snows already dust the ground, making it an appropriate time to create a CSS3 animation of falling leaves.

The alpha-masked PNG leaf images (converted to 16-bit PNGs to save on file size) are animated with the CSS keyframe sequences below; I’ve also used CSS 3D transforms to twist the leaves as they descend. (You'll need to refresh the page to replay the animation).

I was interested to see if the drop-shadow filter I have recently discussed would be animated while keeping the 3D perspective of each leaf: I’m very pleased to report that it does. (As a recent code addition to Webkit, only Chrome 20+ and Safari 6 users will see the shadow forming under the leaves as they drift towards the ground).

The CSS consists of two keyframe sequences; it’s the variation in calling these sequences and the initial state of the individual leaves, set with inline styles, that creates variety in the animation. Code is shown sans vendor prefixes to save space.

@keyframes sway { 
	0% { 
		transform: rotateZ(-15deg) rotateX(55deg);
	}
    30% {
		transform: rotateZ(20deg) rotateX(60deg);
		animation-timing-function: ease-in-out;
	}
	60% { 
		transform: rotateZ(-20deg) rotateX(55deg);
		animation-timing-function: ease-in-out;
	}
    100% {
		transform: rotateZ(0deg) rotateX(58deg);
		animation-timing-function: cubic-bezier(0.990, 0.000, 0.890, 0.435);
		}
}
@keyframes fall { 
	60% {
		filter: drop-shadow(0px 60px 40px rgba(0,0,0,0));
	}
	100% {
		margin-top: 500px;
		filter: drop-shadow(0px 5px 8px rgba(0,0,0,0.6));
	}
}
div#autumn-container {
	width: 768px;
	height: 400px;
	border: 1px solid #000;
	overflow: hidden;
	position: relative;
	perspective: 1800px;
	}
img[alt="autumn leaf"] {
	position: absolute;
	width: 33%;
	transform-origin: 0px -400px 0px;
	animation-name: fall, sway;
	animation-duration: 7s, 8s;
	animation-fill-mode: both;
	animation-timing-function: linear, ease-in-out;
}

The HTML and inline styles:

<div id="autumn-container">
	<img src="leaf.png" alt="autumn leaf" style="top: -60px;">
	<img src="leaf2.png" alt="autumn leaf" style="top: -45px; left: 300px; animation-delay: 2s;">
	<img src="leaf4.png" alt="autumn leaf" style="width: 28%; top: -122px; left: 110px; animation-delay: 3.2s;">
	<img src="leaf5.png" alt="autumn leaf" style="width: 35%; top: -55px; left: 198px; animation-delay: 4.4s;">
	<img src="leaf7.png" alt="autumn leaf" style="width: 38%; top: -18px; left: 560px; animation-delay: 2.25s;">
	<img src="leaf6.png" alt="autumn leaf" style="width: 33%; top: 0px; left: 401px; animation-delay: 3.8s;">
</div>

There are many possible improvements to the animation, the obvious two being the use of JavaScript to randomly generate new instances of leaves and fall behaviour while handing the actual animation over to CSS3 declarations. I should mention that all of these subjects are featured in my book, Pro CSS3 Animation.

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/eyoFf