CSS：animation与转换

所以，我明白如何执行CSS3转换和animation。 什么是不明确的，我GOOGLE了，是什么时候使用哪个。

例如，如果我想让球弹跳，显然animation就是要走的路。 我可以提供关键帧和浏览器将做中间帧，我会有一个很好的animation。

但是，有时可以实现上述效果。 一个简单而常见的例子就是实现facebook风格的滑动抽屉菜单：

这个效果可以通过如下的转换来实现：

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

http://jsfiddle.net/NwEGz/

或者，通过这样的animation：

 .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"); }); 

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

1. 一个显而易见的区别是animation需要更多的代码。
2. animation给予更好的灵活性 我可以有不同的animation滑出和进入
3. 有什么可以说的performance。 这两个都利用h / w加速？
4. 哪个更现代化，如何前进
5. 还有什么可以添加的？

Answer 1

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

一个转换是一个animation ，就是在两个不同的状态之间执行的一个animation ，即一个开始状态和一个结束状态。 像抽屉菜单一样，开始状态可以打开，结束状态可以closures，反之亦然。

如果你想要执行一些并不特别涉及开始状态和结束状态的事情，或者你需要对转换中的关键帧进行更好的纹理控制，那么你必须使用animation。

Answer 2

我会让这些定义为自己说话（根据Merriam-Webster）：

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

animation ：赋予生命或生命的品质; 充满活力

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

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

Answer 3

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

2. 无需animation即可滑入和滑出不同的效果。 对原始规则和修改后的规则只是有一个不同的转换：

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

3. animation只是过渡的抽象，所以如果过渡是硬件加速，那么animation就是。 没什么区别。

4. 两者都非常现代。

5. 我的经验法则是，如果我使用三次相同的转换，它可能应该是一个animation。 这在未来更容易维护和改变。 但是，如果你只使用一次，那么制作animation的打字就更多了，也许不值得。

Answer 4

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

另一方面的过渡指定了一个或多个财产如何执行其变更。 每一个变化。 为某个属性设置一个新的值，不pipe是JavaScript还是CSS，总是一个过渡，但是默认情况下不是一个平滑的过程。 通过设置CSS样式的transition ，您可以定义不同（平滑）的方式来执行这些更改。

可以说， 转换定义了一个默认的animation ，每当指定的属性发生变化时都应该执行。

Answer 5

我相信CSS3animationvs CSS3过渡将给你你想要的答案。

基本上下面是一些外卖：

1. 如果性能是一个问题，那么selectCSS3转换。
2. 如果在每次转换之后要维护状态，则selectCSS3转换。
3. 如果animation需要重复，请selectCSS3animation。 因为它支持animation迭代计数。
4. 如果需要复杂的animation。 然后CSS3animation是首选。