因此,我了解如何执行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");
});
我想了解的是这些方法的优缺点是什么。
发布于 2013-12-15 09:41:42
看起来你已经掌握了如何去做它们,只是不知道什么时候去做。
转换是一个动画,只是在两个不同的状态之间执行的一个,即开始状态和结束状态。像抽屉菜单一样,开始状态可以是打开的,结束状态可以是关闭的,反之亦然。
如果你想执行没有的特定的开始状态和结束状态,或者你需要对变换中的关键帧进行更细粒度的控制,那么你必须使用动画。
发布于 2013-12-15 09:36:27
我将让定义自己说话(根据Merriam-Webster):
Transition:从一种形式、阶段或风格到另一种形式、阶段或风格的运动、发展或演变
动画:具有生命或生命品质的;充满动感的
这些名称与它们在CSS中的用途相匹配
因此,您给出的示例应该使用转换,因为它只是从一种状态到另一种状态的更改
发布于 2019-01-14 19:17:17
一个简短的回答,直截了当地说:
过渡:
<代码>G29
动画@关键帧:
它可以用于无限的状态设置超过2个状态
两者都使用CPU加速以获得更平滑的效果。
https://stackoverflow.com/questions/20586143
复制相似问题