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); …