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为no longer a webkit browser either（但Safari仍然存在，因此您应该保留带前缀的版本+旧Chrome版兼容性）。

如果您愿意，也可以在这些相应浏览器的旧版本中添加-moz-和-o-前缀版本以支持。

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

CSS过渡对图像的影响

1 个答案: