CSS：动画与过渡

我了解如何执行 CSS3过渡 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions and 动画 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations。不清楚的是何时使用哪个。

例如，如果我想让球弹起，很明显动画是最佳选择。我可以提供关键帧，浏览器将执行中间帧，这样我就会有一个很好的动画。

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

这种效果可以通过像这样的转换来实现：

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

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

http://jsfiddle.net/NwEGz/ http://jsfiddle.net/NwEGz/

或者，通过像这样的动画：

.sf-page {
    animation-duration: .4s;
    transition-timing-function: ease-out;
}

.sf-page.in {
    animation-name: sf-slidein;
    transform: translate3d(0, 0, 0);
}

.sf-page.out {
    animation-name: sf-slideout;
    transform: translateX(240px);
}

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

http://jsfiddle.net/4Z5Mr/ 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. 哪一个更现代，未来的发展方向是什么？

看起来您已经掌握了如何执行这些操作，但不知道何时执行这些操作。

一个过渡是一部动画，只是在两个不同状态（即开始状态和结束状态）之间执行的操作。就像抽屉菜单一样，开始状态可以是打开的，结束状态可以是关闭的，反之亦然。

如果你想执行某件事does not特别涉及开始状态和结束状态，或者您需要对过渡中的关键帧进行更细粒度的控制，那么您必须使用动画。