11

私は次のHTMLを持っています:

<ul>
    <li>
        <a href="#">
            <h2>title</h2>
        </a>
    </li>
     <li>
        <a href="#">
            <h2>title</h2>
        </a>
    </li>
     <li>
        <a href="#">
            <h2>title</h2>
        </a>
    </li>
</ul>

CSS

ul {
    list-style: none;  
    text-align: center;
}
ul li {
    position: relative;
    float: right;
    margin-right: 20px;
    width: 30%;
}
ul li {
    transition: all 0.3s;
}
ul li:hover {
    top: -10px;
}
ul li> a{
    color: red;
}

問題は、トランジションが moz では機能せず、webkit で機能することです。これをクロスブラウザの方法で実装するにはどうすればよいですか?

デモ

4

4 に答える 4

4

cssでアニメーション動作プロパティtopとしてリストされているにもかかわらず、CSSプロパティがfirefoxでアニメーションを行うのに奇妙な動作をする理由がわかりません。

とにかく、margin-top代わりに使用するとtop、Firefox で正常に動作します。

しかし、次回からはポジショニングを使わずに、transformの「translateX」と「translateY 」の css プロパティを使うことをお勧めします。効率的だからです。(ポール・アイリッシュの推薦)

于 2013-08-26T09:32:36.663 に答える
2

それは間違いなく、あなたが書いた CSS の遷移宣言やその他のものではありませんopacity:.5。

そのため、何らかの理由で、Firefox はtopプロパティを移行していません。正直なところ、その理由はまだわかりません。今のところ私の解決策は、代わりに CSS 変換を使用して項目を 10 ピクセル上に移動することです。

ul li:hover {
    -o-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);

}

ここでわかるように、これは Firefox で正常にアニメーション化されます。

http://jsfiddle.net/y7yQQ/7/

于 2013-08-26T09:26:48.857 に答える