我想为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>
谢谢!
答案 0 :(得分:3)
不确定要执行哪种动画,但由于它是简单的渐变,因此无需考虑图像。只需定义渐变,然后必须定义大小即可正确设置动画。
这是一个基本示例
.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 percentage values with background-position on a linear-gradient