CSS遮罩图像能否实现动画效果？

Question

CSS遮罩图像能否实现动画效果？

12

我想要动态地更改CSS遮罩图像的“mask-position”属性。遮罩图像本身是一个简单的渐变，我的预期行为是通过更改遮罩位置的值，使得背景对象从左到右淡入。然而，这个属性是否可以被动画化呢？如果不能，是否有解决方法？

.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>

- Ben Viatte

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

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

这是一个基本示例：

.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://istack.dev59.com/lkGW7.webp" />
  </figure>
</div>

在掩码中使用的渐变与在背景中使用的方式相同，因此这里有一个相关问题，以获取有关如何处理计算的更多详细信息：在线性渐变上使用百分比值的background-position