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. Articles, tutorials, premium 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.
From 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.