信不信由你，这张可爱的狗的图片只用了 CSS 和 HTML 就实现了渐变效果（然后被屏幕捕捉放到了这篇文章中）。我来给你讲解一下实现方法。

如果你曾经使用过视频编辑软件——无论是 Windows Movie Maker 还是 Adobe Premiere Pro——那么你很可能熟悉淡入淡出视频转场效果。它们非常有效，可以营造出很好的、高端的感觉。而当你在编写 Web 应用程序时，完全可以拥有这种效果。

淡入效果

当你使用 CSS 的淡入效果时，这只猫看起来更加史诗级。

为了让你的图片从透明渐变到完全不透明，首先将以下代码粘贴到你的 CSS 代码块中：

.fade-in {
  animation: fadeIn ease 10s;
  -webkit-animation: fadeIn ease 10s;
  -moz-animation: fadeIn ease 10s;
  -o-animation: fadeIn ease 10s;
  -ms-animation: fadeIn ease 10s;
}@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
}

在 fade-in 中，你可以将 10s 更改为任何你想要的秒数的倍数。10 秒的渐变有些缓慢，如果你想要更快的渐变，可以尝试一个较低的范围。我建议你进行尝试，直到达到你想要的效果。

还要注意，-webkit、-moz、-o 和 -ms 是供应商前缀，可以确保代码在不同的浏览器之间（例如在 Google Chrome 和 Mozilla Firefox 之间）正常工作。维护每个浏览器的重复 CSS 代码确实很烦人，但无论用户使用的是哪种浏览器，保持一致性对他们来说都非常重要。

最后，你只需要在你的 HTML 标签中引用 fade-in 类，以确保它接受你粘贴的 CSS 代码：

<div class="fade-in">
   <img src="../images/epic-cat-picture.png">
</div>

在这个例子中，<div class="fade-in"> 标签中的所有内容都会在 10 秒的过渡时间内淡入。

淡出效果

再见了，我亲爱的雀鸟。

为了让 HTML 元素淡出，然后将以下代码粘贴到你的 CSS 代码块中：

.fade-out {
  animation: fadeOut ease 8s;
  -webkit-animation: fadeOut ease 8s;
  -moz-animation: fadeOut ease 8s;
  -o-animation: fadeOut ease 8s;
  -ms-animation: fadeOut ease 8s;
}@keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-moz-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-o-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-ms-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
}

主要的改变是将 0%（开始）选项的不透明度设为 1（最大值），然后将 100%（结束）选项的不透明度设为 0（最小值）。这在技术上已经足够了，但是将前一个例子中的 fadeIn 改为 fadeOut 可以确保你用简单明了的英语准确描述正在发生的事情。

同样，你需要在 HTML 类中明确使用 CSS 代码：

<div class="fade-out">
   <img src="../images/little-bird-picture.png">
</div>

在这个例子中，这只鸟在 8 秒的时间内淡出。