CSS对图像的转换效果

我想在图像上创建过渡效果。我在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会出现这种情况。 非常感谢您的帮助,谢谢。