5

ここに投稿されたさまざまな回答を見てきましたが、何もうまくいきませんでした...

内容: 0.6 に縮小された div があり、呼び出されたときに 1 (100%) に拡大する必要があります。

問題: Firefox では #myDiv が意図したとおりに拡大されますが、Chrome または Safari (Mac の場合) では何も起こりません。

私はこのDIVコードを持っています:

#myDiv {
-moz-animation: changeSize 1s ease-out .5s  forwards; /* Fx 5+ */
-webkit-animation: changeSize 1s ease-out .5s 0 forwards; /* Safari 4+ */
-o-animation: changeSize 1s ease-out .5s  forwards;  /* Opera */ 

-webkit-transform: scale(0.6);/* Saf3.1+, Chrome */
-moz-transform: scale(0.6); /* FF3.5+ */
-ms-transform: scale(0.6); /* IE9 */
-o-transform: scale(0.6); /* Opera 10.5+ */
transform: scale(0.6);

display: inline-block;
opacity:100;
background-image: url(img.png);
width: 154px;
height: 28px;
position: absolute;
left: 145px;
top: 5px;
}

そして、拡大トランジションのキーフレーム アニメーション:

@keyframes changeSize {
0% {transform:scale(0.6)}
100% {transform: scale(1)}
}


@-moz-keyframes changeSize  /* Firefox */ {
0% {transform:scale(0.6)}
100% {transform:scale(1)}
}

@-webkit-keyframes changeSize  /* Safari and Chrome */{
0% {transform:scale(0.6)}
100% {transform:scale(1)}
}

@-o-keyframes changeSize  /* Opera */ {
0% {transform:scale(0.6)}
100% {transform:scale(1)}
}

HTML:

ここで何が欠けているか教えてください！

ありがとう！

4

1 に答える 1

3

あなたのエラーはこの行にあります：

-webkit-animation: changeSize 1s ease-out .5s 0 forwards;

不要0です！

最後に、

@-moz-keyframes changeSize  /* Firefox */ {
    0% {transform:scale(0.6)}
    100% {transform:scale(1)}
}

@-webkit-keyframes changeSize  /* Safari and Chrome */{
    0% {transform:scale(0.6)}
    100% {transform:scale(1)}
}

@-o-keyframes changeSize  /* Opera */ {
    0% {transform:scale(0.6)}
    100% {transform:scale(1)}
}

これらのキーフレーム内で、何かが欠けています。どの変換プロパティにも、ブラウザー サポートの接頭辞はありません。例えば：

@-webkit-keyframes changeSize  /* Safari and Chrome */{
    0% {-webkit-transform:scale(0.6)}
    100% {**-webkit-**transform:scale(1)}
}

-webkit- プレフィックスを変換プロパティに追加しました。Google Chrome と Safari で表示されるようになりました。

補足: 不要なコード ブロックがいくつかある場合があります。-moz-、-ms-、および -o-。

于 2013-06-02T02:14:31.557 に答える