CSS：动画与转换

103

所以，我明白如何执行CSS3转换和动画。什么是不明确的，我已经GOOGLE了，是什么时候使用哪个。CSS：动画与转换

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

但是，有时可以实现上述效果。一个简单而常见的例子就是实现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加速度吗？
哪个更现代化，如何前进
还有什么可以补充的吗？除非您使用的是相同的过渡一遍又一遍，在这种情况下，动画效果会更好

来源

2013-12-14 Code Poet

145

看起来你应该使用过渡的例子”我们已经掌握了如何去做，而不是什么时候去做。

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

如果你要执行的东西，不具体包括开始状态和结束状态，或者你需要在一个过渡的关键帧更细粒度的控制，那么你必须使用动画。

来源

2013-12-15 01:41:41 Adam

完美清晰的解释 –

也看看这篇文章http://www.kirupa.com/html5/css3_animations_vs_transitions.htm，它正确地指出，转换是做JavaScript的交互时要走的路。 –

清楚的解释谢谢 – Student22

动画需要更多的代码。
您可以在没有动画的情况下滑入和滑出不同的效果。只需对原有的规则和修改后的规则都不同的过渡：
```
.two-transitions { 
    transition: all 50ms linear; 
} 

.two-transitions:hover { 
    transition: all 800ms ease-out; 
} 
```
动画只是过渡的抽象，因此，如果过渡是硬件加速，动画会。没什么区别。
两者都非常现代。
我的经验法则是，如果我使用三次相同的转换，它应该可能是一个动画。这在未来更容易维护和改变。但是，如果您只使用过一次，那么制作动画的输入会更多，也许不值得。

来源

2013-12-14 19:42:50 paulcpederson

我还应该补充说，动画有关键帧，可以让你做非常复杂和可控的进程，这真是太神奇了。 – paulcpederson

我会让定义为自己说话（根据韦氏）：

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

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

名称适当地满足他们的目的在CSS

所以，你给了，因为它只是从一个状态变化到另一个

来源

2013-12-15 01:36:27

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

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

可以说是过渡定义默认动画应每隔指定的属性发生了变化时进行。

来源

2014-03-11 21:23:03

我不同意这个定义，因为它们都指定* how *和* what * –

我相信CSS3 animation vs CSS3 transition会给你你想要的答案。基本上低于

一些外卖：

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

来源

2015-06-17 15:35:24 PixelsTech

＃2和＃3不是真的 –

我不知道＃3是不是真的？这似乎是一个合理的考虑点，并且动画迭代计数似乎是一个有效的属性：https：//developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count – ibgib

CSS：动画与转换

回答

相关问题