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 CSS3 keyframe sequences below; I’ve also used CSS3 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.

1. @keyframes sway {
2.       0% { transform: rotateZ(-15deg) rotateX(55deg);  }
3.       30% { transform: rotateZ(20deg) rotateX(60deg);
4. animation-timing-function: ease-in-out; }
5.       60% { transform: rotateZ(-20deg) rotateX(55deg);
6. animation-timing-function: ease-in-out; }
7.       100% { transform: rotateZ(0deg) rotateX(58deg);
8. animation-timing-function: cubic-bezier(0.990, 0.000, 0.890, 0.435);  }
9. }
10.  
11. @keyframes fall {
12.       60% { filter: drop-shadow(0px 60px 40px rgba(0,0,0,0)); }
13.       100% { margin-top: 500px;
14.             filter: drop-shadow(0px 5px 8px rgba(0,0,0,0.6)); }
15. }
16.  
17. div#autumn-container { width: 768px; height: 400px;
18. border: 1px solid #000; overflow: hidden;
19. position: relative;  perspective: 1800px; }
20. img[alt="autumn leaf"] {
21. position: absolute;
22. width: 33%;
23. transform-origin: 0px -400px 0px;
24. animation-name: fall, sway;
25. animation-duration: 7s, 8s;
26. animation-fill-mode: both;
27. animation-timing-function: linear, ease-in-out;
28. }

The HTML and inline styles:

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

I’m afraid this is going to be one of the rare entries in which I don’t explain every line of code, due to the fact that I’ve yet to create background material for 3D in this blog. 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 behavior while handing the actual animation over to CSS3 declarations. I should mention that all of these subjects are strongly featured in my upcoming book, Pro CSS3 Animation.