CSS将html页面从黑白转换为带有CSS的彩色？答案

【问题标题】：CSS transition html page from black white to color with css?CSS将html页面从黑白转换为带有CSS的彩色？
【发布时间】：2016-08-06 18:00:18
【问题描述】：

只是想知道它是否可能，但我试图让我的页面在加载时从黑白转换为彩色可能需要 4 秒的时间 - 整个页面、文本、div、图像，一切。

我制作了一张黑白图像，该图像通过悬停转换为彩色版本，是否与此类似？但是使用包装器？

img.desaturate { 
   animation: toColour 10s;
}

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

或者让每件东西都用颜色单独过渡？

仅使用 css 是否有更好的方法或可能的方法？

提前致谢

【问题讨论】：

标签： html css css-transitions transition transitions

【解决方案1】：

我不明白为什么不，只是在你的包装器中使用你的动画：

jsFiddle

代码片段：

@keyframes toColour {
  0% {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
  }
  25% {
    -webkit-filter: grayscale(75%);
    filter: grayscale(75%);
  }
  50% {
    -webkit-filter: grayscale(50%);
    filter: grayscale(50%);
  }
  50% {
    -webkit-filter: grayscale(25%);
    filter: grayscale(25%);
  }
  100% {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
  }
}
.wrapper {
  background-color: royalblue;
  animation: toColour 4s;
}
p {
  color: cyan;
}

<div class="wrapper">
  <p>
    Example text with color
  </p>
  <img src="http://fillmurray.com/500/500">
</div>

【讨论】：

【解决方案2】：

除非你尝试，否则你永远不会知道。看看这个

.desaturate, .desaturate *  { 
   animation: toColour 7s;
}

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

<div class="desaturate">
  <img src="http://images.freeimages.com/images/previews/476/green-fly-on-orange-flower-1366361.jpg" alt="" width="200" height="200"/>
</div>

【讨论】：