CSS Animation Weekly #352

Linear timing functions, popover API, CSS 3D editors and more

Hey, it’s been a while! I hope you’re all doing well. Let’s look at some cool CSS animation stuff.

Using linear() for better animation

As someone who has used Bézier curves a lot, this “linear()” easing function blows my mind! Check it out.

Introducing the popover API

Learn all about this new way to semantically create modal popovers, including adding animation.

On-Scroll Pixelated Image Loading Effect

A recreation of the on-scroll pixelated image loading effect seen on Felicity Ingram's website.

Toaster | CSS 3D Editor

Toaster is a 3D editor that models in pure CSS + HTML. No WebGL, no canvas. Impractical? Yes. Useless? Also yes… but amazing!

Atom loader

Some beautifully simple CSS animation in this loader

3D parallax effect on hover

Hover to see the background position change in just the right way to create a parallax-style effect

That’s all for this week!