html - 过渡不适用于 FF

Question

我有以下简单的 HTML 和 CSS。它在 Chrome 中运行良好。但不是法郎。我的意思是 transition 在 FF 上不起作用。我正在使用 FF 18。我在 Google 和 SO 上搜索了这个问题并找到了一些技巧。但它们都不适用于我的问题。有什么想法吗？

HTML:

<div class="image-list cf">    
    <figure>
        <a href="javascript:return false;">
            <img src="image-src-1"/>
        </a>
        <span>
            <a href="javascript:return false;">File Name 1</a>
        </span>
        <span>
            10 Images
        </span>
    </figure>    
    <figure>
        <a href="javascript:return false;">
            <img src="image-src-1"/>
        </a>
        <span>
            <a href="javascript:return false;">File Name 1</a>
        </span>
        <span>
            10 Images
        </span>
    </figure>
    <-- and more -->
</div>

CSS:

/* images list
**********************************************************/
.image-list {}
.image-list figure {
    float: right;
    width: 180px;
    border: 1px solid;
    border-color: #aaa;
    border-radius: 0;
    box-shadow: 
        1px 0 0 #fff, 
        0 1px 0 #fff, 
        -1px 0 0 #fff, 
        0 -1px 0 #fff,
        0 0 2px #000;
    margin-right: 29px;
    text-align: center;
    padding: 10px 0;
    background-color: #fff;
    -webkit-transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}
.image-list figure:hover{
    border-color: #666;
    box-shadow: 
        1px 0 0 #fff, 
        0 1px 0 #fff, 
        -1px 0 0 #fff, 
        0 -1px 0 #fff,
        0 0 10px #000;
}
[class="image-list"] figure:hover {
    border-color: #666;
    box-shadow: 
        1px 0 0 #fff, 
        0 1px 0 #fff, 
        -1px 0 0 #fff, 
        0 -1px 0 #fff,
        0 0 10px #000;
}
.image-list figure a {}
.image-list figure a img {}
.image-list figure span {
    display: block;
    padding: 5px 0;
    width: 160px;
    margin: 0 auto;
    overflow: hidden;
    height: 1em;
}
.image-list figure span a {}

Answer 1

可能是您使用的是不支持转换功能的旧版浏览器。请参阅下面的链接以获取页面末尾的过渡支持图表

https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions

这里是一些支持注释的代码

-webkit-transition: all .3s linear;    //  webkit browsers like chrome, safari support code
-moz-transition: all .3s linear;       //  mozilla support code
-o-transition: all .3s linear;         //  opera support code
transition: all .3s linear;            //  css3 code