Animating CSS Background Blend Modes

There are only a few CSS background properties that can be animated: background-position, background-size, and background-color. With the addition of background-blend-mode to the CSS spec, this has been expanded slightly, albeit with limitations: we can only animate the property by alternating between blend modes and a value of normal. However, it’s also possible to animate background blends by using the other properties.

As one example, we might provide an enhanced impression of speed by altering background-position after hovering over a <div>:

div#runner { 

position: relative;

padding-top: 45%;

background: url(runner-long-distancw.jpg),

linear-gradient(90deg, #fff 50%, #000 50.5%);

background-size: cover, 20% 100%; 

background-blend-mode: difference; transition: 2s;

background-position: 200px 0px, 0px top; 

background-repeat: no-repeat, repeat-x;

}

div#runner:hover { background-position: -200px 0px, 200px top; }

… which results in the example you can see above. Obviously this particular effect needs to be employed with care, as the motion may affect those with vestibular disorders and light-sensitive epilepsy.

This is only an initial stab at the effects possible with background-blend-mode: I’ll be showing more very soon.