css动画的steps_html/css_WEB-ITnose
animation默认以ease方式过渡,会以在每个关键帧之间插入补间动画,所以动画效果是连贯性的。ease,linear等之类的过渡函数都会为其插入补间。但有些效果不需要补间,只需要关键帧之间的跳跃,这时应该使用steps过渡方式。本文后面有案例。
steps用法
简单地说,就是原本一个状态向另一个状态的过渡是平滑的,steps可以实现分布过渡。steps用法 :
steps(n,[start | end])
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,动画是连贯的,所以我们看到了跑马灯似的效果:

Copy after login -
最后,当然是我们的终极效果s3,因为设计师把我们看到的类似 Flash 的动画逐帧导出成一张大图,再加上合适的steps和动画时间,就看到了人人网首页的那般顺滑的动画效果!
注意,为了保持最后停止的状态,还要加一个 `forwards ` ,这里不是本文重点,就不细说了。
Copy after login呼呼,终于理清了steps的作用。感觉这个过程就是渐进增强的体验,一开始用户只能体验s1,后来有了css3,可以体验美妙的动画了,就像s3。单元以后我们能够做到让每一个用户都满意。
原文
欢迎关注我的博客

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.

The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
