CSS过渡在悬停时淡入淡出

【问题标题】：CSS transition fade on hoverCSS过渡在悬停时淡入淡出
【发布时间】：2012-10-11 03:02:21
【问题描述】：

我遇到了CSS 转换的问题。我正在为我的作品集设计一个CSS 画廊，我需要我的图像在悬停时淡入。我已经玩了一个多小时了，我希望有人能指出我正确的方向。

这是JSFiddle的简化版本

【问题讨论】：

【解决方案1】：

这样就可以了

.gallery-item
{
  opacity:1;
}

.gallery-item:hover
{
  opacity:0;
  transition: opacity .2s ease-out;
  -moz-transition: opacity .2s ease-out;
  -webkit-transition: opacity .2s ease-out;
  -o-transition: opacity .2s ease-out;
}

【讨论】：

您忘记在-moz-transition 上放置秒单位测量值
在非:hover 元素上设置了opacity，这导致了我的问题。
当你释放悬停时，它会以 0.0 的速度快速恢复

【解决方案2】：

我建议您为图片库使用无序列表。

除非您希望图像在悬停后立即获得 50% 的不透明度，否则您应该使用我的代码。您将有一个更顺畅的过渡。

#photos li {
    opacity: .5;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
}

#photos li:hover {
    opacity: 1;
}

【讨论】：