图像上的 CSS 过渡效果答案

【问题标题】：CSS transition effect on images图像上的 CSS 过渡效果
【发布时间】：2014-03-18 22:57:56
【问题描述】：

我想在图像上创建过渡效果。我让它在 Chrome 上运行，但它似乎在 Firefox 中不起作用（不透明度有效，悬停时它恢复正常，但不会产生过渡效果。

我的 HTML 是：

<ul class="list-inline">
              <li>
                <a href="#">
                    <img id="email-footer" src="images/email.png" alt="Email" />
                </a>
              </li>
              <li>
                <a href="#" >
                    <img id="linkedin-footer" src="images/linkedin.png" alt="Linked in" />
                </a>
              </li>
</ul>

样式是：

.list-inline img {
opacity: 0.3;
-webkit-transition: opacity 0.3s ease-out;
}

#linkedin-footer:hover {
opacity: 1;
-webkit-transition: opacity 0.3s ease-out;
}

#email-footer:hover {
opacity: 1;
-webkit-transition: opacity 0.3s ease-out;
}

我的 CSS 不太好，我不确定为什么会在 Firefox 中发生这种情况。非常感谢任何帮助，谢谢。

【问题讨论】：

标签： css hover css-transitions

【解决方案1】：

那是因为您添加的 -webkit- 前缀指的是 webkit 浏览器（Firefox 不是其中之一）。

请注意，从版本 26 开始，Chrome 为 no longer a webkit browser either（但 Safari 仍然是，因此您应该保留前缀版本 + 旧 Chrome 版本兼容性）。

如果您愿意，您还可以包含 -moz- 和 -o- 前缀版本，以支持这些浏览器的旧版本。

我相信您需要为每个样式添加的跨浏览器等效项是：transition:opacity 0.3s ease-out;。

【讨论】：