190. CSS Animation

With Flash set to discontinue from January 12th and the HTML blink tag obsolete, how will we animate our websites from now on? With this issue in mind, we decided to dedicate today’s show to the wonderful topic of animation! We discuss how best to tame this powerful and often misused beast as well as get into the tools at our disposal for doing so in CSS, JavaScript, and by using prebuilt libraries too. Animation definitely has a place in UI, but can easily look tacky and overdone, so we start our chat off exploring some best practices for keeping things tasteful and useful. From there, we get into a few of the technicalities of building animations in CSS, highlighting the power of keyframes as well as some of the kinks in this new feature that still need to be worked out. Toward the end of our chat, we speak about the great functionality provided by animation frameworks like React’s Spring library, animate.style, and the Web Animations API. So even though Flash is a thing of the past, there is no need to cry, because there are plenty of tools in CSS and JavaScript that will keep us building beautiful animations on our websites well into the foreseeable future. Tune in to learn more!

Episode source