The State of CSS Animation

CSS has matured in many ways over the years, not least in terms of CSS animations. With each day that passes more and more developers are creating living, breathing interfaces. In this article we’ll look at the state of CSS animations, how it has grown, what it’s capable of today and cover some resources and tools available. Let’s get moving!


Use of animation on the web are rising, largely because of the transition and  @keyframes additions to CSS. There once was a time when animations and CSS didn’t know one another, but that isn’t the case today. Articlestutorialspremium courses and even motion guidelines are far more accessible now than they once were. Combining @keyframes with the animation property, along with transition has finally given developers the chance to craft motion properly and lend interfaces a personality and life once unconsidered. 

Part of Googles Material Motion GuidelinesFrom Google’s Material Motion Guidelines

There has never been a more exciting time for CSS animations and interaction design than right now!

Animation Property & Keyframes

Current implementation of the animation property allows developers to control the duration, timing, delay, iteration count, direction, fill mode and play state. The timing portion also allows for a steps()function. This special timing function breaks an animation or transition into segments (like a film strip), rather than as one continuous transition from one state to another. Keyframes allow motion developers to declare positions using from, to and even percentages to animate between property values declared. That’s a great start, but we’ll discuss in a moment where it falls short.

Read Full Article

Leave a Reply

Your email address will not be published.