所以，我了解如何同时执行 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); }
    to { -webkit-transform: translate3d(240px, 0, 0); }
}

@-webkit-keyframes sf-slidein {
    from { -webkit-transform: translate3d(240px, 0, 0); }
    to { -webkit-transform: translate3d(0, 0, 0); }
}

http://jsfiddle.net/4Z5Mr/

使用如下所示的 HTML：

<div class="sf-container">
    <div class="sf-page in" id="content-container">
        <button type="button">Click Me</button>
    </div>
    <div class="sf-drawer">
    </div>
</div>

而且，这个附带的 jQuery 脚本：

$("#content-container").click(function(){
    $("#content-container").toggleClass("out");
    // below is only required for css animation route
    $("#content-container").toggleClass("in");
});

我想了解的是这些方法的优缺点。

1. 一个明显的区别是动画需要更多的代码。
2. 动画提供了更好的灵活性。我可以有不同的动画来滑出和滑入
3. 关于性能有什么可以说的。两者都利用硬件加速吗？
4. 哪个更现代，未来的方向
5. 还有什么可以补充的吗？