【问题标题】：With HTML/CSS, how do I transition from one image to another using an animated mask?使用 HTML/CSS，如何使用动画蒙版从一张图像过渡到另一张图像？
【发布时间】：2013-06-04 19:00:40
【问题描述】：

我在一个 HTML 页面中有两个图像。一种是黑白的，另一种是彩色的。我想使用自定义动画从黑白图像过渡到彩色图像。我正在寻找的效果是图像显示为黑白，然后似乎是逐笔“绘制”的颜色。

我能想到的最简单的方法是创建一个动画 gif，它从白色开始，然后逐笔画成黑色。然后我可以使用绝对定位将彩色图像放在黑白图像的顶部，并用动画 gif 屏蔽彩色图像。

但是，在进行此操作之前，我四处搜索，看看是否有人做过类似的事情，但我无法找到任何例子。这有可能吗，你能举个例子吗？

或者，有没有更好的方法来达到这个效果？

【问题讨论】：

如果你走动画 gif 路线，你不能只在一张图像中做完整的动画，而放弃多个图像、层和定位吗？
为什么我会想太多？感谢您恢复一些理智。现在我只是好奇这是否可以做到。

标签： html css animation gif

【解决方案1】：

如果你只有两张图片，那么交叉淡入淡出重叠的两张图片非常简单

 @keyframes cf3FadeInOut {
  0% {
  opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

#cf3 img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}

看这里的演示 3 & 4 http://css3.bradshawenterprises.com/cfimg/

【讨论】：

【解决方案2】：

我已经为你完成了一半的工作

对于这个 html

<id class="base">
</id>

还有这个 CSS

.base {
    width: 200px;
    height: 200px;
    border: solid 1px black;
    position: absolute;
}

.base:before, .base:after {
    background-image: url("http://placekitten.com/200/300"); 
    width: 100%;
    height: 100%;
    position: absolute;
    content: '';
}

.base:after {
    -webkit-filter: grayscale(1);
    -webkit-mask-size: 200px 200px;
    -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 70px, rgba(0, 0, 0, 0) 80px); 
}

您得到（在 2 个伪元素中）原始图像和灰度图像。（为此，您需要一个 webkit 浏览器）。

然后，用蒙版文件将灰度图像变为透明。

我没有任何带有透明胶片的 gif，所以我无法测试最终结果，但我认为它应该可以工作。（只需将 .webkit-mask-image 更改为 url(gif)

如果可行，请分享您的结果！

demo

是的，这是一种矫枉过正，但一旦你开始工作，你就可以不费吹灰之力地适应另一个图像！

updated demo with an animated gif as mask

【讨论】：