Rob OLeary

Posted on Oct 6, 2023 • Updated on Oct 7, 2023 • Originally published at roboleary.net

A quick trick to create animated silhouettes in CSS

#css #webdev

I want to show you a shortcut to fashion an animated scene with silhouetted figures with very little CSS. It does not requires handcrafting an image in CSS, making a drawing in SVG, or using any JavaScript. File it under creative and maybe frivolous!

You can make something like this kitsch Halloween scene..

The silhouettes in the scene are styled with the same gradient.

You can think of it as a way to make a kind of animated collage!

Let's unpack how this was made.

The trick to make animated silhouettes

An interesting application of CSS masks is that you can use an animated image, image formats such as GIF and WebP, as the source of the mask. The trick is to choose an animated image with a transparent background that has distinct figures as the mask-image. When you give the element a solid background that you have applied the mask to, the element appears as an animation filled with your background style.

Let's make one now. There is a decent selection of these type of animated images on Giphy in the sticker section. I will search for the term "wave".

Then, we style a div as described. I apply background-color:green to turn the wave green!

div{
  -webkit-mask-image: url("https://i.giphy.com/media/OzXfHi0efbEeA/giphy.webp");
  mask-image: url("https://i.giphy.com/media/OzXfHi0efbEeA/giphy.webp");

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  mask-repeat: no-repeat;


  /* need to set a background */
  background-color:green;

    /* need to set dimensions */
  width: 20rem;
  height: 20rem;
}

You can see the result in the codepen below.

You could use the shorthand mask property to reduce the 3 mask-releated properties to a one-liner if you prefer!

Browser interop issues

Chrome still requires prefixed properties for the effect to work. Chrome also expects -webkit-mask-size to be set, Firefox does not. Interop 2023 is meant to be eradicating these interoperability issues.

Which animated image formats should you use?

I would recommend favouring using more modern image formats over GIF that have much better compression. Some GIFs can be monsters! WebP and AVIF support alpha transparency and animation, the mandatory ingredients, so they are the best options at the moment. WebP has total support across modern browsers and AVIF is making good headway.

Accessibility

It is good practice to use the prefers-reduced-motion media query to reduce or disable animation for people with vestibular motion disorders. Something like this would suffice:

/* Remove the animation to avoid vestibular motion triggers. */
@media (prefers-reduced-motion) {
  div{
    -webkit-mask-image: none;
    mask-image: none;

    /* use a static background instead */
    background-image: url("img/static-green-wave.jpg");
  }
}