As web applications come closer to matching the capabilities of native applications, one of the most exciting avenues of design that have opened up to us is that of animation. Animation, when executed well, offers a fourth dimension through which we can communicate with the user: time.
New CSS properties allow us to use animation to draw the user's attention through an application in a very natural way. By using principles of animation that have been honed over a hundred years, we can convey meaning and personality in ways that web designers have never been able to before. These new properties are easy to use, robust, and performant, blending seamlessly with existing CSS techniques.
One quick note: Many of the example animations in this article have been slowed down to show detail. All of the animations throughout Decky are 400 milliseconds long or shorter. Also, I learned a lot of the techniques I used on Decky by reading Designing Interface Animation and A Pocket Guide to CSS Animations, both by Val Head, and used Mozilla's MDN as a reference.
In addition to showing Magic decks or cards "loading" into the screen, we can convey important information