因此，我了解了如何同时执行CSS3过渡和动画。我用谷歌搜索的不清楚是什么时候使用它。

例如，如果我想使球弹跳，很明显，动画是必经之路。我可以提供关键帧，而浏览器将做中间帧，并且我将获得一个不错的动画。

然而，在某些情况下，无论哪种方式都可以达到上述效果。一个简单而常见的示例是实现Facebook风格的滑动抽屉菜单：

可以通过以下过渡来实现此效果：

.sf-page {
    -webkit-transition: -webkit-transform .2s ease-out;
}

.sf-page.out {
    -webkit-transform: translateX(240px);
}

或者，通过类似这样的动画：

.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); }
}

使用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. 您还可以添加其他内容吗？