Articles Tagged

The CSS steps() function let us divide an animation/transition progress into a specified number of equal-length intervals or steps.

The linear() function let us define stops in an animation/transition, which will progress sequentially along a straight line.

What does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.

Along with the version 3.13 release, GSAP, and all its awesome plugins, are now freely available to everyone.

The GSAP animation library and its plugins are now completely free for open use.…

The @keyframes at-rule sets the value of properties at different points during an animation, so instead of defining how each property should behave at each frame of an animation, we set its keyframes, and CSS will figure out (i.e., interpolate) the values between them.

Well, it turns out that SVG's built-in animation features were never deprecated as planned. Sure, CSS and JavaScript are more than capable of carrying the load, but it's good to know that SMIL is not dead in the water as previously thought, and is actually well-supported.

The animation-timeline CSS property controls the progress of animations using timelines beyond the traditional document timeline. Typically, CSS animations progress based on the amount of time passed in the document’s default timeline, which begins when the page is loaded. With …

The @starting-style at-rule in CSS allows us to define styles for elements just as they are first rendered in the DOM. The classic situation this solves is trying to animate an element from display: none.