CSS:动画与过渡
CSS:动画与过渡
提问于 2013-12-15 01:28:44
因此，我了解如何执行CSS3 transitions和animations。不清楚的是，我已经在谷歌上搜索过了，那就是什么时候使用哪一个。
例如，如果我想让球反弹，很明显动画是可行的。我可以提供关键帧，浏览器会做中间帧，我会有一个很好的动画。
然而，在某些情况下，无论哪种方式都可以实现上述效果。一个简单而常见的例子是实现facebook风格的滑动抽屉菜单：
这种效果可以通过如下转换来实现：
.sf-page {
-webkit-transition: -webkit-transform .2s ease-out;
}
.sf-page.out {
-webkit-transform: translateX(240px);
}或者，通过像这样的动画：
.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); }
}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");
});我想了解的是这些方法的优缺点是什么。
- 一个明显的区别是，动画需要占用更多的code.
- Animation，从而提供更好的灵活性。我可以有不同的动画来滑出，在
- 中有一些关于性能的东西可以说。两者都利用了硬件的优势吗? acceleration?
- Which更现代，而且你还可以添加forward
- Anything的方式？
回答 10
Stack Overflow用户
回答已采纳
发布于 2013-12-15 09:41:42
看起来你已经掌握了如何去做它们，只是不知道什么时候去做。
转换是一个动画，只是在两个不同的状态之间执行的一个，即开始状态和结束状态。像抽屉菜单一样，开始状态可以是打开的，结束状态可以是关闭的，反之亦然。
如果你想执行没有的特定的开始状态和结束状态，或者你需要对变换中的关键帧进行更细粒度的控制，那么你必须使用动画。
Stack Overflow用户
发布于 2013-12-15 09:36:27
我将让定义自己说话(根据Merriam-Webster)：
Transition：从一种形式、阶段或风格到另一种形式、阶段或风格的运动、发展或演变
动画：具有生命或生命品质的；充满动感的
这些名称与它们在CSS中的用途相匹配
因此，您给出的示例应该使用转换，因为它只是从一种状态到另一种状态的更改
Stack Overflow用户
发布于 2019-01-14 19:17:17
一个简短的回答，直截了当地说：
过渡：
- 需要触发元素(:hover、:focus等)
- 仅2个动画状态(开始和结束)
- 用于更简单的动画(按钮、下拉菜单等)
- 更易于创建，但动画/效果可能性不是很大
<代码>G29
动画@关键帧：
它可以用于无限的状态设置超过2个状态
两者都使用CPU加速以获得更平滑的效果。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20586143
复制相关文章
相似问题