css3 动画animation 及@keyframes 规则 |
您所在的位置：网站首页 › css动画和js动画的差异 › css3 动画animation 及@keyframes 规则 |
|
前端实现动画效果无非js与css 两种，这里主要讲一下css动画的实现以及区别 @keyframes 规则 //宽度从100px 变成 200px // boxW 为 方法名 @keyframes boxW { from {width:100px;} to {width:200px;} } //或 //from（与 0% 相同）； to（与 100% 相同） @keyframes boxW { 0% {width:100px;} 100% {width:200px;} } animation 属性 //示例 使用 boxW 方法，div会在5秒内从100px 变为 200px div { animation: boxW 5s infinite; } 值描述animation-name规定需要绑定到选择器的 keyframe 名称。。animation-duration规定完成动画所花费的时间，以秒或毫秒计。animation-timing-function规定动画的速度曲线。animation-delay规定在动画开始之前的延迟。animation-iteration-count规定动画应该播放的次数。animation-direction规定是否应该轮流反向播放动画。animation-fill-mode属性规定动画在播放之前或之后，其动画效果是否可见。 animation-timing-function 值描述linear动画从头到尾的速度是相同的。ease默认。动画以低速开始，然后加快，在结束前变慢。ease-in动画以低速开始。ease-out动画以低速结束。ease-in-out动画以低速开始和结束。cubic-bezier(n,n,n,n)在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 animation-iteration-count 值描述n定义动画播放次数的数值。infinite规定动画应该无限次播放。 animation-fill-mode 值描述none不改变默认行为。forwards当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。backwards在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。both向前和向后填充模式都被应用。 animation-direction 值描述normal默认值。动画应该正常播放。alternate动画应该轮流反向播放。 js与css 动画的区别 js动画优点： js动画代码复杂，因此可操作性高，可以对动画比较好的控制，例如：开始、暂停、回放、取帧等 动画效果比css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有js动画才能完成 css3有兼容性问题，而JS大多时候没有兼容性问题 缺点： js动画是逐帧动画，是在时间帧上逐帧绘制帧内容，由于是一帧一帧的话,虽然可操作性高，但是如果帧率过低的话，会帧与帧之间的过渡很可能会不自然、不连贯。 (2)代码的复杂度高于CSS动画 css 动画优点： 制作方法简单方便。只需确定第一帧和最后一帧的关键位置即可，两个关键帧之间帧的内容由Composite线程自动生成，不需要人为处理。 (3)对于帧速表现不好的低版本浏览器，css3可以做到自然降级，而JS则需要撰写额外代码 缺点： 想要做到一些酷炫的效果的时候，其操作往往可能会比js操作有更多的冗余。 因为只设置几个关键帧的位置，所以在进行动画控制的时候时比较弱的。不能够在半路暂停动画，或者在动画过程中不能对其进行一些操作等。 总结如果动画只是一些简单的状态切换，滑动等效果，不需要中间的控制过程，css3是比较好的选择，它直接在css文件中就可以实现，并不需要引入太多的js库。而你想做一些复杂的客户端界面，开发一个复杂ui的app，实现一个复杂纹理动画等，需要对页面进行精准的控制计算，js是不错的选择。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |