css动画的steps_html/css

来源：动视网责编：小采时间：2020-11-27 16:34:50

css动画的steps_html/css

css动画的steps_html/css_WEB-ITnose:animation默认以ease方式过渡，会以在每个关键帧之间插入补间动画，所以动画效果是连贯性的。ease，linear等之类的过渡函数都会为其插入补间。但有些效果不需要补间，只需要关键帧之间的跳跃，这时应该使用steps过渡方式。本文后面有案例。 steps用法

推荐度：

点击下载本文 文档为doc格式

导读css动画的steps_html/css_WEB-ITnose:animation默认以ease方式过渡，会以在每个关键帧之间插入补间动画，所以动画效果是连贯性的。ease，linear等之类的过渡函数都会为其插入补间。但有些效果不需要补间，只需要关键帧之间的跳跃，这时应该使用steps过渡方式。本文后面有案例。 steps用法

案例 - 人人网首页效果

先看看人人网首页的效果:

再戳demo

一步一步分析：

首先，我们不加动画，就像s1；

然后，加animation但是没有steps，像s2那样。这样很奇怪是不是，就是因为没有steps，动画是连贯的，所以我们看到了跑马灯似的效果：

![s2](http://7xlc2a.com1.z0.glb.clouddn.com/15-9-17/6316635.jpg)

最后，当然是我们的终极效果s3，因为设计师把我们看到的类似 Flash 的动画逐帧导出成一张大图，再加上合适的steps和动画时间，就看到了人人网首页的那般顺滑的动画效果！

注意，为了保持最后停止的状态，还要加一个 `forwards ` ，这里不是本文重点，就不细说了。

呼呼，终于理清了steps的作用。感觉这个过程就是渐进增强的体验，一开始用户只能体验s1，后来有了css3，可以体验美妙的动画了，就像s3。单元以后我们能够做到让每一个用户都满意。

原文

欢迎关注我的博客

css动画的steps_html/css

推荐度：

点击下载本文 文档为doc格式

标签：动画 html css

热门焦点

css动画的steps_html/css

css动画的steps_html/css

案例 - 人人网首页效果

css动画的steps_html/css

最新推荐

猜你喜欢

热门推荐