时间戳

首页 > 解决方案 > 是否可以为 CSS 蒙版图像设置动画？

css - 是否可以为 CSS 蒙版图像设置动画？

问题描述

我想为 CSS 蒙版图像的“蒙版位置”属性设置动画。mask-image 本身是一个简单的渐变，我的预期行为是通过更改 mask 位置的值，我可以使背景对象从左到右淡入。但是，是否可以为该属性设置动画？如果没有，是否有解决方法？

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

谢谢！

标签： csscss-animationscss-mask

解决方案

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

这是一个基本示例

.header-image figure {
  -webkit-mask-image: linear-gradient(to right, transparent, #fff, transparent);
  -webkit-mask-size: 300% 100%;
  mask-image: linear-gradient(to right, transparent, #fff, transparent);
  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>

蒙版中使用的渐变与背景中使用的方式相同，因此这里有一个相关问题，以获取有关如何处理计算的更多详细信息：Using percent values with background-position on a linear-gradient

推荐阅读