Table of Contents
steps用法
辨析steps
案例 - 控制台效果
案例 - 人人网首页效果
Home Web Front-end HTML Tutorial css动画的steps_html/css_WEB-ITnose

css动画的steps_html/css_WEB-ITnose

Jun 21, 2016 am 09:06 AM

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

steps用法

简单地说,就是原本一个状态向另一个状态的过渡是平滑的,steps可以实现分布过渡。steps用法 :

steps(n,[start | end])
Copy after login

n是一个自然数,steps函数把动画分成n等份。

  • step-start

     等同于 `steps(1,start)` ,动画分成 1 步,动画执行时以左侧端点为开始 ;    
    Copy after login
  • step-end

    等同于 steps(1,end) ,动画分成 1 步,动画执行时以结尾端点为开始 。
    Copy after login

没懂对不对?我也没懂,上面是官方的说法。接着往下看吧

辨析steps

可以在demo中查看step的区别:狠狠地戳下去

steps(4,start) 与 steps(1,start) 的最大区别就是每次动画"跳跃"的时候,即从 0% -> 25% 的时候,steps(1) 直接一步到位,瞬间从0%的状态跳到25%的状态,而steps(4)会逐渐走4步,即从 0% -> 25% 要跳 4 步 !

慢慢体会一下,应该就知道steps的作用了吧

案例 - 控制台效果

先戳 demo

这里就是steps(1,start) ,动画又是只有 0%(100%) 、 50% 两个状态,所以直接一步跳跃,直接走完。

你可以改成steps(4),就更能知道steps的作用了

案例 - 人人网首页效果

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

再戳demo

一步一步分析:

  • 首先,我们不加动画,就像s1;

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

    ![s2](http://7xlc2a.com1.z0.glb.clouddn.com/15-9-17/6316635.jpg)
    Copy after login
  • 最后,当然是我们的终极效果s3,因为设计师把我们看到的类似 Flash 的动画逐帧导出成一张大图,再加上合适的steps和动画时间,就看到了人人网首页的那般顺滑的动画效果!

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

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

    原文

    欢迎关注我的博客

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update? Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update? Mar 04, 2025 pm 12:32 PM

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?

How do I use HTML5 form validation attributes to validate user input? How do I use HTML5 form validation attributes to validate user input? Mar 17, 2025 pm 12:27 PM

How do I use HTML5 form validation attributes to validate user input?

What is the purpose of the <iframe> tag? What are the security considerations when using it? What is the purpose of the <iframe> tag? What are the security considerations when using it? Mar 20, 2025 pm 06:05 PM

What is the purpose of the <iframe> tag? What are the security considerations when using it?

How to efficiently add stroke effects to PNG images on web pages? How to efficiently add stroke effects to PNG images on web pages? Mar 04, 2025 pm 02:39 PM

How to efficiently add stroke effects to PNG images on web pages?

What is the purpose of the <meter> element? What is the purpose of the <meter> element? Mar 21, 2025 pm 12:35 PM

What is the purpose of the <meter> element?

What is the purpose of the <datalist> element? What is the purpose of the <datalist> element? Mar 21, 2025 pm 12:33 PM

What is the purpose of the <datalist> element?

What is the purpose of the <progress> element? What is the purpose of the <progress> element? Mar 21, 2025 pm 12:34 PM

What is the purpose of the <progress> element?

What is the viewport meta tag? Why is it important for responsive design? What is the viewport meta tag? Why is it important for responsive design? Mar 20, 2025 pm 05:56 PM

What is the viewport meta tag? Why is it important for responsive design?

See all articles