3

以下を使用して、要素の「弾む」アニメーションを作成したかったのです。

div{

  -webkit-transform:scale(0);
  -moz-transform:scale(0);
  -ms-transform:scale(0);

  -webkit-transition:all 0.4s cubic-bezier(0.57, 0.07, 0.44, 2);
  -moz-transition:all 0.4s cubic-bezier(0.57, 0.07, 0.44, 2);
  -ms-transition:all 0.4s cubic-bezier(0.57, 0.07, 0.44, 2);
}
div.fire{

  -webkit-transform:scale(1);
  -moz-transform:scale(1);
  -ms-transform:scale(1);
}

かなり単純です。スケール変換を使用して、要素を完全に非表示にします (または必要に応じて縮小します)。次に、最後の引数 2 を指定して cube-bezier を使用して遷移プロパティを割り当てます (ここで曲線を参照してください: http://cubic-bezier.com/#.57,.07,.44,2 )

次に、第 2 段階 (ホバー中または他の何かによってアクティブ化された可能性があります。「解雇された」クラスを取得します) で、100% までスケールアップします。

cubic-bezier()を使用すると、scale()プロパティが 1 を超えて大きくなり、その後 1 に戻って、「バウンス」効果が生じることが予想されます。これは、他のプロパティ ( padding、left、などmargin) では機能しますが、スケール変換では機能しません。

これは、Chrome (28.0.1500.71 m、Windows 7 64 ビット) では発生しません。Firefox と IE10 で動作OK

ここで例を参照してください: http://codepen.io/anon/pen/oiexl

ありがとうございました

4

1 に答える 1