Fading effects are quite common on the Web today. They are used to display or hide an HTML element or to change an element into another element, gradually.
Fading transitions are pixel-by-pixel blends between an HTML element (the source element) and either the element behind it or the color in the background. A solution based on animating the
opacity property is used to make the source element more or less transparent so that the background element becomes more or less visible, thus simulating the desired effect.
The Compositing and Blending spec describes a new way to blend an element with the content behind it by using the
mix-blend-mode property, which can be enabled on stable versions of Chromium, Firefox and Opera, and will soon be officially supported in Firefox 31 and Safari 8.
A blend mode is a formula used for mixing source and background colors. This mix of source and background prevents animation using CSS animations or CSS transitions. However, when the content is generated by a CSS property such as
background-image: radial-gradient(...), we can animate the value of this property, and the animated content will be used in the blending operation.
Let’s assume we have an image we want to display or hide using a fade effect. If the initial background is white, we can use the
lighten blend mode. That’s because applying a
lighten blend mode on white produces white and applying a
lighten blend mode on black leaves the image unchanged. So if we animate the background color from white to black the image is displayed; and if we animate the background color from black to white the image disappears. Similarly, when starting from a black background, we can use the
darken blend mode.
In the example below, I use the
darken blend mode combined with a simple transition from white to black on the
background-color to hide the image. For more interesting effects, you can generate arbitrary colors between the initial white and the final black by animating the
background-color property using CSS animations. Move the mouse over the images to see the difference between the
mix-blend-mode based effect (on the left) and the
opacity-based effect (on the right). For the image on the left, notice the parts with bright colors start fading away sooner than the area with dark colors.
[CodePen height=330 show=result href=f2262811c76ff332e3921a5a663a5de2 user=adobe ]
We can use this technique as an alternative to creating grayed-out or inactive content. To accomplish this effect, we need to use a background color that acts as an identity operator and doesn’t change the result of the blend mode.
- Black doesn’t change the result for
- White doesn’t change the result for
- Gray (#808080) doesn’t change the result for
- A transparent background doesn’t change the result for any blend mode.
The codepen below demonstrates the
hard-light blend mode combined with a background transition from black to gray (the first row), compared to opacity based fading (the second row).
[CodePen height=423 show=result href=14e7c4af114815824441498f5d5916a4 user=adobe ]
Here is another example using the
color-burn blend mode and a
background-color transition from slategray to transparent:
[CodePen height=410 show=result href=6497c3944988cfd401b763a7e6474c7c user=adobe ]
If the content you want to blend is a color and one or more images, you can get the same effects using
background-blend-mode – all set on a single
background-blend-mode property is officially supported starting with Chrome 35, Firefox 30 and Opera 22.
My design skills don’t do Blend Modes justice, so I can’t wait to see more cool samples using this feature. Please share yours here or on Twitter.