CSS：动画与过渡

155

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

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

然而，在某些情况下，无论哪种方式都可以达到上述效果。一个简单而常见的示例是实现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");
});

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

一个明显的区别是动画制作需要花费更多的代码。
动画具有更好的灵活性。我可以滑入和滑入不同的动画
关于性能，有什么可以说的吗？两者都利用硬件加速吗？
哪个更现代以及前进的方向
您还可以添加其他内容吗？

css css-transitions css-animations

— 诗人
source

209

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

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

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

— 亚当
source

7

也可以查看这篇文章kirupa.com/html5/css3_animations_vs_transitions.htm，它正确地指出了转换是进行javascript交互时要走的路。

— Scott Jungwirth，2015年

40

我让这些定义说明一切（根据Merriam-Webster）：

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

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

名称在CSS中适合其用途

因此，您给出的示例应使用过渡，因为这只是从一种状态到另一种状态的变化

— 扎克·索西耶
source

21

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

过渡：

需要一个触发元素（：hover，：focus等）
仅2种动画状态（开始和结束）
用于更简单的动画（按钮，下拉菜单等）
易于创建，但动画/效果可能性不大

动画@keyframes：

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

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

— 格列奇夫
source

当您说“ CPU加速”时，您可能是指“ GPU加速”吗？我相信非布局的重新计算动画（例如“翻译”）会获得这种好处

— jv-dev

12

动画需要花费更多的代码，除非您反复使用相同的过渡，否则动画会更好。

您可以在没有动画的情况下滑入和滑出具有不同的效果。只需对原始规则和修改后的规则进行不同的转换：

.two-transitions {
    transition: all 50ms linear;
}

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

动画只是过渡的抽象，因此，如果过渡是硬件加速的，则动画将是过渡的。没有什么不同的。
两者都很现代。
我的经验法则是，如果我使用相同的过渡3次，则可能应该是动画。这在将来更容易维护和更改。但是，如果仅使用一次，则键入更多内容以制作动画，也许不值得。

— 保罗佩德森
source

我还应该补充一点，动画具有关键帧，使您可以进行非常复杂且受控的进度，这真是太神奇了。

— paulcpederson

3

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

转变对对方指定如何一个属性（或属性）应履行的变化。每次更改。使用JavaScript或CSS为某些属性设置新值始终是一种过渡，但默认情况下并不平滑。通过设置transitionCSS样式，可以定义执行这些更改的不同（平滑）方式。

可以说，过渡定义了默认动画，该动画应在每次更改指定属性时执行。

— 乔南·乔治维
source

1

我不同意这个定义，因为它同时指定了方式和内容

— Zach Saucier 2014年

3

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

在现代浏览器中，H / W加速时的性能filter，opacity和transform。这适用于CSS动画和CSS过渡。

— 埃里克·威利格斯
source

1

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

.yourClass:hover {
    color: #f00;
}

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

展开摘要

-1

我相信CSS3动画与CSS3过渡会为您提供所需的答案。

基本上，下面是一些要点：

如果需要考虑性能，则选择CSS3过渡。
如果要在每次转换后保持状态，则选择CSS3转换。
如果需要重复播放动画，请选择CSS3动画。因为它支持animation-iteration-count。
如果需要复杂的动画。然后首选CSS3动画。

— 像素科技
source

3

＃2和＃3不正确

— Zach Saucier 2015年

1

我不确定＃3为何不正确？似乎有必要考虑一下，并且animation-iteration-count似乎是有效的属性：developer.mozilla.org/en-US/docs/Web/CSS/…–

1

有两件事：1）如果稍后再开始过渡，即使不是在第一次迭代后立即过渡，它仍然是“重复”。2）根据动画的不同，您可以制作一个伪造立即重复的过渡效果。有关我的意思的更多信息，请参见我的CSS-Tricks文章。

— 扎克·索西耶

-1

不要打扰自己，哪个更好。我的礼物是，如果您仅用一两行代码就可以解决问题，那就去做，而不是编写会导致类似行为的代码。无论如何，过渡就像动画的子集。这仅意味着过渡可以解决某些问题，而动画则可以解决所有问题。通过动画，您可以控制从0％到100％的每个阶段，而过渡实际上是做不到的。动画需要您编写一堆代码，而过渡则根据您的工作使用一两行代码来执行相同的结果。从JavaScript的角度来看，最好使用过渡。任何只涉及两个阶段的东西，即开始和结束使用过渡。总结，如果压力很大，请不要

— 云y
source