CSS：动画与过渡

所以，我知道如何同时执行CSS3transitions和animations.现在还不清楚的是，我已经在谷歌上搜索过了，那就是什么时候该用哪一种.

例如，如果我想让球反弹，很明显动画是可行的.我可以提供关键帧，浏览器会做中间帧，我会有一个很好的动画.

然而，在某些情况下，上述效果可以通过任何一种方式实现.一个简单而常见的例子是实现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. 关于表现，有什么可以说的吗.两者都利用了h/w加速吗？
4. 哪一个更现代，前进的道路是什么？
5. 你还有什么要补充的吗？