Question

因此，我了解如何执行CSS3过渡和动画。什么不清楚，我用Google搜索，是什么时候使用哪个。

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

然而，存在可以以任一方式实现所述效果的情况。一个简单而常见的例子是实现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");
});

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

一个明显的区别是动画制作需要更多的代码。
动画提供更好的灵活性。我可以使用不同的动画进行滑出和
是否有关于表现的话题。两者都利用h / w加速？
哪个更现代，前进的方式
您还可以添加其他任何内容吗？

Answer 1

看起来你已经掌握了如何做到这一点，而不是什么时候做。

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

如果您想执行不特定涉及开始状态和结束状态的内容，或者您需要对转换中的关键帧进行更精细的控制，然后你必须使用动画。

Answer 2

我会让定义说明一切（根据Merriam-Webster的说法）：

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

动画：赋予生命或生活品质;充满运动

这些名称在CSS中恰当地符合他们的目的

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

Answer 3

动画需要更多代码，除非您反复使用相同的转换，在这种情况下动画会更好。
在没有动画的情况下，您可以使用不同的效果滑入和滑出。只需对原始规则和修改后的规则进行不同的转换：
```
.two-transitions {
    transition: all 50ms linear;
}

.two-transitions:hover {
    transition: all 800ms ease-out;
}
```
动画只是转换的抽象，所以如果转换是硬件加速，那么动画就是。没有区别。
两者都很现代。
我的经验法则是，如果我使用相同的过渡三次，它可能应该是一个动画。这在将来更容易维护和更改。但是，如果你只使用它一次，那么制作动画就更难打字，也许不值得。

Answer 4

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

转换：

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

动画@关键帧：

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

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

Answer 5

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

另一方的

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

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

Answer 6

关于性能，有什么可以说的吗？都拿硬件加速的优势？

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

Answer 7

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

.yourClass:hover {
    color: #f00;
}

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

Answer 8

我相信CSS3 animation vs CSS3 transition会给你你想要的答案。

基本上下面是一些要点：

如果需要考虑性能，请选择CSS3过渡。
如果要在每次转换后维护状态，请选择CSS3转换。
如果需要重复动画，请选择CSS3动画。因为它支持动画迭代计数。
如果需要复杂的动画。然后首选CSS3动画。

Answer 9

别打扰自己，这是更好的选择。我要说的是，如果您仅用一两行代码就可以解决问题，那么只需这样做，而不是编写会导致类似行为的代码。无论如何，过渡就像动画的子集。它仅表示过渡可以解决某些问题，而动画可以解决所有问题。通过动画，您可以控制每个阶段，从0％一直到100％，这是过渡实际上无法做到的。动画要求您编写一堆代码，而过渡则根据您的工作使用一两行代码来执行相同的结果。从JavaScript的角度来看，最好使用过渡。仅涉及两个阶段（即开始和结束使用过渡）的任何内容。总结，如果压力很大，请不要使用它，因为两者都会产生相似的结果

CSS：动画与转型

9 个答案: