图像上的 CSS 过渡效果

Question

我想在图像上创建一个过渡效果。我让它在 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中会发生这种情况。任何帮助都非常感谢，谢谢。

Answer 1

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

请注意，从版本 26 开始，Chrome 也不再是 webkit 浏览器（但 Safari 仍然是，出于这个原因，您应该保留前缀版本 + 旧的 Chrome 版本兼容性）。

如果您愿意，您还可以包括-moz-和-o-前缀版本，以便在这些相应浏览器的旧版本中提供支持。

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