0

接頭辞にもかかわらず、transform: scale が Chrome、Safari、IE では機能せず、Firefox でのみ機能する理由がわかりません。誰かがこの問題を解決する方法を指摘できますか? キーフレームの幅と高さを変更する方が良いオプションでしょうか?

109 行目以下の短い CSS を確認してください。

.icon-elements p.wizjer {
    background: black;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    position: absolute;
    margin-top: 108px;
    margin-left: 109px;
    z-index: 97;
    display: block;
    border: 1px solid gray;
    border-radius: 50%;
 -webkit-box-shadow: inset 0 0 0 3px rgba(102,102,102,0.81), 0 2px 3px rgba(0,0,0,0.1);
    box-shadow: inset 0 0 0 3px rgba(102,102,102,0.81), 0 2px 3px rgba(0,0,0,0.1);


    -webkit-animation-name: ap-wizjer;
    -moz-animation-name: ap-wizjer;
    -ms-animation-name: ap-wizjer;
    animation-name: ap-wizjer;
    animation-duration: 7s;

    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}


    @-webkit-keyframes ap-wizjer {

        0% {

            -webkit-transform: scale(1, 1);

            transform: scale(1, 1);

        }

        50% {

            -webkit-transform: scale(1.3, 1.3);

            transform: scale(1.3, 1.3);

        }

        100% {

            -webkit-transform: scale(1, 1);

            transform: scale(1, 1);

        }

    }

jsフィドル

どうも。

4

1 に答える 1

0

アニメーションの長さのベンダー プレフィックスを追加するだけです -webkit-animation-duration: 7s; 。お役に立てれば ：）

于 2013-08-13T19:19:45.197 に答える