1

私は2つのアニメーションbounceとsquishstretch.

squishstretch最初にアニメートして、次にbounce、squishstretchもう一度やりたい

これは機能しません: 

animation-name: squishstretch, bounce, squishstretch;
animation-duration: .15s, .2s, .12s;
animation-delay: 0, .25s, .55s;
animation-iteration-count: 2, 2, 2;

しかし、これは

animation-name: squishstretch, bounce, squishstretch2;
animation-duration: .15s, .2s, .12s;
animation-delay: 0, .25s, .55s;
animation-iteration-count: 2, 2, 2;

しかし、これは、 のすべてsquishstretchのルールをコピーして (ベンダーの接頭辞がかなり多い)、その複製に新しい名前を付ける必要があることを意味します。

animation-name に一意の名前を付けることができるように、大量のルールを複製することなく修正する方法はありますか?

デモ: http://jsbin.com/ekebun/1/edit

4

1 に答える 1

1

ひとつのアニメにしよう！

@keyframes squishstretchbounce {
0%   { height: 100px; width: 100px; margin-left: 0; bottom:0; }
44%  { height: 94px; width: 104px; margin-left: -2px; bottom: -6px;}
    88%  { height: 100px; width: 100px; margin-left: 0; bottom:0; }
    89%  { bottom: 0; }
    95%  { bottom: 10px; }
    100% { bottom: 0; }
}

次に、を使用しますanimation: squishstretchbounce 1.4s infinite;。あなたがコンパイルしたものよりも多くのキーフレームを持っている理由は、アニメーション化してデフォルトの状態に戻すためです。ブラウザのプレフィックスも必ず追加してください。余談ですが、接頭辞を付けないkeyframes必要があると思います@keyframes

于 2013-10-18T13:43:56.397 に答える