【问题标题】：CSS transition image from black white to colorCSS从黑白到彩色的过渡图像
【发布时间】：2021-07-08 00:08:32
【问题描述】：

我看到很多网站都有黑白图像，通过:hover 选择器转换为彩色版本。我正在尝试做的是相同的，但没有用户交互。例如，图像会从黑白开始，并在 10 秒后褪色为彩色版本。

这可以通过 CSS 实现吗？

【问题讨论】：

【解决方案1】：

这样吗？

@keyframes toColor {
    0%    { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
    25%   { -webkit-filter: grayscale(75%); filter: grayscale(75%); }
    50%   { -webkit-filter: grayscale(50%); filter: grayscale(50%); }
    75%   { -webkit-filter: grayscale(25%); filter: grayscale(25%); }
    100%  { -webkit-filter: grayscale(0%); filter: grayscale(0%); }
}


img.desaturate { 
   animation: toColor 10s;
}

&lt;img src="http://i.imgur.com/gMPdDHk.jpg" alt="Lena Söderberg" style="width: 300px;" class="desaturate"&gt;

【讨论】：

【解决方案2】：

另一种使用翻转行为以在图像悬停时启动图像着色动画的简单方法。

img{ filter: grayscale(100%); transition: filter .3s ease-in-out;}
img:hover { filter: none;}

【讨论】：