CSS：动画与过渡

CSS: Animation vs. Transition

提问by Code Poet

So, I understand how to perform both CSS3 transitions and animations. What is not clear, and I've googled, is when to use which.

所以，我了解如何执行 CSS3 过渡和动画。不清楚的是什么时候使用哪个，我已经用谷歌搜索过了。

For example, if I want to make a ball bounce, it is clear that animation is the way to go. I could provide keyframes and the browser would do the intermediates frames and I'll have a nice animation going.

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

However, there are cases when a said effect can be achieved either way. A simple and common example would be implement the facebook style sliding drawer menu:

但是，也有两种方式都能达到上述效果的情况。一个简单而常见的例子是实现 facebook 风格的滑动抽屉菜单：

This effect can be achieved through transitions like so:

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

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

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

http://jsfiddle.net/NwEGz/

http://jsfiddle.net/NwEGz/

Or, through animations like so:

或者，通过这样的动画：

.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/

http://jsfiddle.net/4Z5Mr/

With HTML that looks like so:

使用 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>

And, this accompanying jQuery script:

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

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

What I'd like to understand is what are the pros and cons of these approaches.

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

1. One obvious difference is that animating is taking a whole lot more code.
2. Animation gives better flexibility. I can have different animation for sliding out and in
3. Is there something that can be said about performance. Do both take advantage of h/w acceleration?
4. Which is more modern and the way going forward
5. Anything else you could add?

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

回答by Adam

It looks like you've got a handle on how to do them, just not when to do them.

看起来你已经掌握了如何做它们，而不是什么时候做它们。

A transition is an animation, just one that is performed between two distinct states - i.e. a start state and an end state. Like a drawer menu, the start state could be open and the end state could be closed, or vice versa.

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

If you want to perform something that does notspecifically involve a start state and an end state, or you need more fine grain control over the keyframes in a transition, then you've got to use an animation.

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

回答by Zach Saucier

I'll let the definitions speak for themselves (according to Merriam-Webster):

我会让定义不言自明（根据 Merriam-Webster）：

Transition: A movement, development, or evolution from one form, stage, or style to another

Animation: Endowed with life or the qualities of life; full of movement

过渡：从一种形式、阶段或风格到另一种形式、阶段或风格的运动、发展或演变

动画：赋予生命或生命的品质；充满动感

The names appropriately fit their purposes in CSS

这些名称在 CSS 中恰当地适合它们的用途

So, the example you gave should use transitions because it is only a change from one state to another

所以，你给出的例子应该使用转换，因为它只是从一种状态到另一种状态的变化

回答by Grecdev

A shorter answer, straight on point:

一个简短的答案，直截了当：

Transition:

过渡：

1. Needs a triggering element (:hover, :focus etc.)
2. Only 2 animation states (start and end)
3. Used for simpler animations (buttons, dropdown menus and so on)
4. Easier to create but not so many animation/effect possibilities

1. 需要一个触发元素（:hover, :focus 等）
2. 只有 2 个动画状态（开始和结束）
3. 用于更简单的动画（按钮、下拉菜单等）
4. 更容易创建但没有那么多动画/效果的可能性

Animation @keyframes:

动画@keyframes：

1. It can be used for endless animations
2. Can set more than 2 states
3. No boundaries

1. 它可以用于无尽的动画
2. 可以设置2个以上的状态
3. 没有界限

Both use CPU acceleration for a much smoother effect.

两者都使用 CPU 加速以获得更平滑的效果。

回答by paulcpederson

1. Animation takes a lot more code unless you're using the same transition over and over, in which case an animation would be better.

2. You can have different effects for sliding in and out without an animation. Just have a different transition on both the original rule and the modified rule:

   .two-transitions {
       transition: all 50ms linear;
   }
   
   .two-transitions:hover {
       transition: all 800ms ease-out;
   }
   

3. Animations are just abstractions of transitions, so if the transition is hardware accelerated, the animation will be. It makes no difference.

4. Both are very modern.

5. My rule of thumb is if I use the same transition three times, it should probably be an animation. This is easier to maintain and alter in the future. But if you are only using it once, it is more typing to make the animation and maybe not worth it.

1. 动画需要更多的代码，除非你一遍又一遍地使用相同的过渡，在这种情况下动画会更好。

2. 您可以在没有动画的情况下使用不同的滑入和滑出效果。只是对原始规则和修改后的规则有不同的转换：

   .two-transitions {
       transition: all 50ms linear;
   }
   
   .two-transitions:hover {
       transition: all 800ms ease-out;
   }
   

3. 动画只是过渡的抽象，所以如果过渡是硬件加速的，动画将会是。没有什么不同的。

4. 两者都非常现代。

5. 我的经验法则是，如果我使用相同的过渡 3 次，它可能应该是一个动画。这在将来更容易维护和更改。但是如果你只使用它一次，那么制作动画需要更多的输入，而且可能不值得。

回答by Jonan Georgiev

Animationsare just that - a smooth behavior of set of properties. In other words it specifies whatshould happen to a set of element's properties. You define an animation and describe how this set of properties should behave during the animation process.

动画就是这样 - 一组属性的平滑行为。换句话说，它指定了一组元素的属性应该发生什么。您定义一个动画并描述这组属性在动画过程中应该如何表现。

Transitionson the other side specify howa property (or properties) should perform their change. Each change. Setting a new value for certain property, be it with JavaScript or CSS, is always a transition, but by default it is not smooth. By setting transitionin the css style you define different (smooth) way to perform these changes.

转变对对方指定如何一个属性（或属性）应履行的变化。每一次改变。为某些属性设置新值，无论是使用 JavaScript 还是 CSS，总是一个过渡，但默认情况下它并不平滑。通过transition在 css 样式中设置，您可以定义不同（平滑）的方式来执行这些更改。

It can be said that transitionsdefine a default animationthat should be performed every time the specified property has changed.

可以说，transitions定义了一个默认动画，每次指定的属性发生变化时都应该执行该动画。

回答by Eric Willigers

Is there something that can be said about performance. Do both take advantage of h/w acceleration?

关于性能有什么可以说的吗？两者都利用硬件加速吗？

In modern browsers, h/w acceleration occurs for the properties filter, opacityand transform. This is for both CSS Animations and CSS Transitions.

在现代浏览器中，硬件加速发生在属性filter,opacity和transform。这适用于 CSS 动画和 CSS 过渡。

回答by Eric Willigers

.yourClass {
    transition: all 0.5s;
color: #00f;
margin: 50px;
font-size: 20px;
cursor: pointer;
}

.yourClass:hover {
    color: #f00;
}

<p class="yourClass"> Hover me </p>

回答by Unyime

Don't bother yourself which is better. My give away is that, if you can solve your problem with just one or two lines of code then just do it rather than writing bunch of codes that will result to similar behavior. Anyway, transition is like a subset of animation. It simply means transition can solve certain problems while animation on the other hand can solve all problems. Animation enables you to have control of each stage starting from 0% all the way to 100% which is something transition cannot really do. Animation require you writing bunch of codes while transition uses one or two lines of code to perform the same result depending on what you are working on. Coming from the point of JavaScript, it is best to use transition. Anything that involve just two phase i.e. start and finish use transition. Summary, if it is stressful don't use it since both can produce similar result

不要打扰自己哪个更好。我的意思是，如果你可以用一两行代码解决你的问题，那就去做吧，而不是编写一堆会导致类似行为的代码。无论如何，过渡就像动画的一个子集。它只是意味着过渡可以解决某些问题，而另一方面动画可以解决所有问题。动画使您能够控制从 0% 一直到 100% 的每个阶段，这是过渡无法真正做到的。动画需要你编写一堆代码，而过渡使用一两行代码来执行相同的结果，具体取决于你正在做什么。从 JavaScript 的角度来看，最好使用转换。任何只涉及两个阶段，即开始和结束使用过渡。总结，如果有压力就不要

回答by PixelsTech

I believe CSS3 animation vs CSS3 transitionwill give you the answer you want.

我相信CSS3 动画 vs CSS3 过渡会给你你想要的答案。

Basically below are some takeaways :

基本上以下是一些要点：

1. If performance is a concern, then choose CSS3 transition.
2. If state is to be maintained after each transition, then choose CSS3 transition.
3. If the animation needs to be repeated, choose CSS3 animation. Because it supports animation-iteration-count.
4. If a complicated animation is desired. Then CSS3 animation is preferred.

1. 如果性能是一个问题，那么选择 CSS3 过渡。
2. 如果要在每次转换后保持状态，则选择 CSS3 转换。
3. 如果动画需要重复，选择CSS3动画。因为它支持动画迭代计数。
4. 如果需要复杂的动画。那么CSS3动画是首选。