动画CSS背景混合模式

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.

只有少数CSS背景属性可以设置动画： background-position ， background-size和background-color 。 通过在CSS规范中添加background-blend-mode ，尽管有一定局限性，但它进行了一些扩展：我们只能通过在混合模式和normal值之间交替来为属性设置动画 。 但是，也可以通过使用其他属性来为背景混合动画。

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

举一个例子，我们可以通过将鼠标悬停在<div>上来改变background-position ，从而提高速度background-position ：

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.

这只是对使用background-blend-mode可能产生的效果的初步了解：我将很快展示更多。

翻译自: https://thenewcode.com/914/Animating-CSS-Background-Blend-Modes