CSS：动画与过渡

Question

因此，我了解了如何同时执行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. 您还可以添加其他内容吗？

Answer 1

看起来您已经掌握了如何执行操作的能力，而不是何时执行操作。

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

如果要执行 不 特别涉及开始状态和结束状态的操作，或者需要对过渡中的关键帧进行更精细的控制，则必须使用动画。