有可能为CSS掩码图像设置动画吗

Question

我想为"掩模位置"；CSS掩码图像的属性。遮罩图像本身是一个简单的渐变，我的预期行为是通过更改遮罩位置的值，我可以使背景对象从左向右淡入。但是，是否可以设置该特性的动画？如果没有，是否有解决方法？

.header-image figure {
mask-image: url("http://thehermitcrab.org/wp-content/themes/the-hermit-theme/images/gradient-mask-straight.png");
animation: clip-fade 3s;
}
@keyframes clip-fade {
0% {mask-position: 100% 0%;}
100% {mask-position: 0% 0%;}
}

HTML：

<div class="header-image">
<figure>
<img src="https://thehermitcrab.org/wp-content/themes/the-hermit-theme/images/footer/crab-footer-chalk-logo.png"/>
</figure>
</div>

Answer 1

不确定要执行哪种动画，但由于这是一个简单的渐变，因此无需考虑图像。只需定义梯度，然后必须定义大小才能正确地设置动画。

以下是的一个基本示例

.header-image figure {
-webkit-mask-image: linear-gradient(90deg, #0000, #fff, #0000);
mask-image: linear-gradient(90deg, #0000, #fff, #0000);
-webkit-mask-size: 300% 100%;
mask-size: 300% 100%;
animation: clip-fade 3s infinite alternate;
}
img {
max-width: 100%;
}
@keyframes clip-fade {
100% {
-webkit-mask-position: right;
mask-position: right;
}
}
body {
background: red;
}

<div class="header-image">
<figure>
<img src="https://i.stack.imgur.com/lkGW7.png" />
</figure>
</div>

掩模中使用的梯度与背景中使用的渐变工作方式相同，因此这里有一个相关的问题来获得有关如何处理计算的更多细节：在线性梯度上使用背景位置的百分比值