CSS:アニメーションと遷移
そのため、CSS3トランジションとアニメーションの両方を実行する方法を理解しています。はっきりしないのは、私がググってみましたが、いつどれを使用するかです。 たとえば、ボールをバウンドさせたい場合は、アニメーションが最適です。キーフレームを提供すると、ブラウザが中間フレームを実行し、素晴らしいアニメーションが作成されます。 ただし、いずれの方法でも上記の効果が得られる場合があります。シンプルで一般的な例は、Facebookスタイルのスライド式ドロワーメニューを実装することです。 この効果は、次のような遷移によって実現できます。 .sf-page { -webkit-transition: -webkit-transform .2s ease-out; } .sf-page.out { -webkit-transform: translateX(240px); } http://jsfiddle.net/NwEGz/ または、次のようなアニメーションを通じて: .sf-page { -webkit-animation-duration: .4s; -webkit-transition-timing-function: ease-out; } .sf-page.in { -webkit-animation-name: sf-slidein; -webkit-transform: translate3d(0, 0, 0); } .sf-page.out { -webkit-animation-name: sf-slideout; -webkit-transform: translateX(240px); } @-webkit-keyframes sf-slideout { from { -webkit-transform: translate3d(0, 0, 0); …