In game development, it’s common to use spritesheets for animation, but this technique isn’t as widely used on the web. Which is a shame, because we can do some pretty cool stuff with sprites! In this post, we’ll share the niche CSS function you can use to leverage this technique, and explore some of the potential use cases.

I spent the past few weeks packing as many easter eggs as I could into my latest project, and in this blog post, I want to dig into some of the more interesting details! If you’re interested in animations/interactions, you’ll want to check this one out; I share a bunch of my favourite secrets and tricks. 😄

tl;dr

GIFs are awesome but terrible for quality and performance
Replacing GIFs with <video> is better but has perf. drawbacks: not preloaded, uses range requests
Now you can <img src=".mp4">s in Safari Technology Preview
Early results show mp4s in <img> tags display

<blockquote>In this article, you can learn how to build the animated note display from the <a href="https://www.awwwards.com/">Awwwards</a> website. It discusses the HTML5 SVG circle element, its stroke properties, and how to animate them with CSS variables and Vanilla JavaScript.</blockquote>

CSS3 transitions are amazing but few of us delve beyond the ease or linear options. Ceaser is an easy-to-use tool which offers a range of animation opportunities. Choose a standard or preset easing type, tweak the curve and copy the code.