深入精通CSS3

CSS 动画的 steps

2015/09/28 · CSS · 动画

本文作者: 伯乐在线 - risker 。未经作者许可,禁绝转发!
迎接参加伯乐在线 专辑撰稿人。

animation默认以ease措施连接,会以在每一个关键帧之间插入补间动画,所以动画效果是连贯性的。easelinear等等等的连结函数都会为其插入补间。但稍事效果与利益无需补间,只供给关键帧之间的跳跃,那时应该利用steps连片格局。本文后边有案例。

作者:Aaron
初藳地址:http://www.cnblogs.com/aaronjs/p/4642015.html

咱俩精晓CSS3的Animation有多本性情

steps用法

简单的讲地说,正是原先二个动静向另贰个动静的连接是平缓的,steps能够完成遍及过渡。steps用法 :

CSS

steps(n,[start | end])

1
steps(n,[start | end])

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

  • step-start 等同于 steps(1,start) ,动画分成 1 步,动画试行时以右手端点为初阶
  • step-end 等同于 steps(1,end) ,动画分成 1 步,动画实践时以最终端点为始发

没懂对不对?作者也没懂,上面是合法的说教。接着往下看吗

CSS3自身在5年此前就有用了,包蕴公司项目都直接在很前沿的技能。

  1. animation-name
  2. animation-duration
  3. animation-delay
  4. animation-iteration-count
  5. animation-direction
  6. animation-play-state
  7. animation-fill-mode
  8. animation-timing-function

辨析steps

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

steps(4,start)steps(1,start) 的最大不相同就是历次动画”跳跃”的时候,即从 0% -> 20% 的时候,steps(1) 直接一步到位,须臾间从0%的情状跳到伍分之一的情况,而steps(4)会稳步走4步,即从 0% -> 30% 要跳 4 步 !

慢慢体会一下,应该就精晓steps的机能了吗

近来在写慕课网的星节核心,用了汪洋的CSS3动画片,可是的确沉淀下来稳重的去深远CSS3卡通的依次属性发掘照旧很深的,这里就写下有关帧动画steps属性的明亮。

其间1-7大约都有介绍,不过animation-timing-function是决按期期的质量

案例 – 调控台效率

先戳 demo

此间正是steps(1,start) ,动画又是唯有 0%(100%) 、 二分一四个意况,所以直接一步跳跃,直接走完。

您能够改成steps(4),就更能知晓steps的意义了

我们清楚CSS3的Animation有七个属性:

在取值中除了常用到的 三次贝塞尔曲线 以外,还恐怕有个令人可比纠缠的 steps() 函数

案例 – 人人网首页效果

先看看人人网首页的出力:

图片 1

再戳demo

一步一步分析:

  • 首先,大家不加动画,就疑似s1
  • 然后,加animation只是并未有steps,像s2那么。那样很意外是或不是,就是因为尚未steps,动画是贯通的,所以大家来看了跑马灯似的效果:图片 2
  • 最终,当然是咱们的顶点效果s3,因为设计员把大家看出的切近 Flash 的动画片逐帧导出成一张大图,再增加适当的数量的steps和动画片时间,就见到了人人网首页的那么顺滑的动画效果! 注意,为了保证最终结束的意况,还要加一个 forwards ,这里不是本文器重,就不细说了。

再考考你有未有搞明白steps:为何图片是20帧,可是设置成steps(12)呢?

因为steps是安装的每一步动画的弹跳步数,并非整整动画的跳跃步数。举例:

CSS

@-webkit-keyframes ani{ 0%{...} 50%{...} 100%{...} } .xxx:hover{ -webkit-animation:ani 2s steps(10) ; }

1
2
3
4
5
6
7
8
@-webkit-keyframes ani{
   0%{...}
   50%{...}
   100%{...}
}
.xxx:hover{
   -webkit-animation:ani 2s steps(10) ;
}

 

上面的代码指的是0%~50%之间有10个跳跃,50%~100%之间有10个跳跃。而不是0%~100%之间有10个跳跃。

萧萧,终于理清了steps的功力。感觉那一个进程便是渐进巩固的心得,一初叶客商只好体验s1,后来有了css3,能够感受奇妙的卡通了,就像是s3。但愿现在大家能够一鼓作气让每叁个客户都满意。

  1. animation-name
  2. animation-duration
  3. animation-delay
  4. animation-iteration-count
  5. animation-direction
  6. animation-play-state
  7. animation-fill-mode
  8. animation-timing-function

animation暗许以ease情势连接,它会在每一种关键帧之间插入补间动画,所以动画效果是连贯性的

参考

  • 使用css3-animation来制作逐帧动画

    1 赞 1 收藏 评论

里面1-7大致都有介绍,不过animation-timing-function是决定时间的性质,在取值中除去常用到的 三遍贝塞尔曲线 以外,还大概有个让人比较纠缠的 steps() 函数

除外ease,linear、cubic-bezier之类的连结函数都会为其插入补间。但某个功力无需补间,只供给关键帧之间的跃进,那时应该运用steps过渡格局

关于我:risker

图片 3

二零一四年高校毕业,曾经在首都某互连网厂商从事前端开采的行事,近四个月着重做活动web开拓。搜狐客官太少,求粉。 个人主页 · 笔者的稿子 · 7 ·   

图片 4

animation默认以ease艺术衔接,它会在种种关键帧之间插入补间动画,所以动画效果是连贯性的。

 

除了easelinearcubic-bezier等等的连片函数都会为其插入补间。但稍事功效无需补间,只必要关键帧之间的踊跃,那时应该利用steps过渡格局。

animation-timing-function 规定动画的进程曲线

animation-timing-function 规定动画的快慢曲线

图片 5

图片 6

如上w3school网址上给的运用办法,不过漏掉三个很首要的 steps

如上w3school网址上给的应用格局,可是漏掉多个很关键的** steps**.

简简单单的来讲,大家一贯使用animation基本都以落到实处线性渐变的动画

简单的来讲,大家一贯利用animation基本都以贯彻线性渐变的动画。如:

  • 地点在定点的时光从源点到顶点
  • 尺寸在稳住的年月线性别变化化
  • 颜色的线性改动等等
  • 职位在固化的时刻从起源到极限
  • 尺寸在稳住的光布林线性别变化化
  • 水彩的线性改换等等

看效果 线性动画

看效果 线性动画

截取CSS如下

截取CSS如下

.test1 {
    width: 90px;
    height: 60px;
    -webkit-animation-name: skyset;
    -webkit-animation-duration: 2000ms;
    -webkit-animation-iteration-count: infinite; /*无限循环*/
    -webkit-animation-timing-function: linear;
}
@-webkit-keyframes skyset {
    0% { background: red;}
    50%{ background: blue}
    100% {background: yellow;}
}
.test1 {
    width: 90px;
    height: 60px;
    -webkit-animation-name: skyset;
    -webkit-animation-duration: 2000ms;
    -webkit-animation-iteration-count: infinite; /*无限循环*/
    -webkit-animation-timing-function: linear;
}
@-webkit-keyframes skyset {
    0% { background: red;}
    50%{ background: blue}
    100% {background: yellow;}
}

timing-function:linear 定义的是二个匀速变化的动画片,就是在2秒内,从革命过度到深翠绿到色情,是三个很线性的水彩变化。

 

万一要落到实处帧动画功能实际不是线性的退换就必要引进step这一个值了,换句话就是未有对接的效能,而是一帧帧的生成。

 

同一能够看测量试验 帧动画

timing-function:linear 定义的是一个匀速变化的卡通片,就是在2秒内,从铁青过度到白色到色情,是叁个很线性的水彩变化

理解steps

万一要完毕帧动画成效并不是线性的生成就必要引进step这几个值了,换句话就是未有接通的机能,而是一帧帧的变型

steps 函数钦命了多少个阶跃函数。

长期以来能够看测量检验 帧动画

第七个参数钦点了岁月函数中的间距数量(必须是正整数)。

 

第三个参数可选,接受 startend 多少个值,钦赐在每一个间距的起源或是终点发生阶跃变化,默认为 end.

理解steps

  • step-start等同于steps(1,start),动画分成1步,动画实行时为发轫右侧端点的有的为发端;
  • step-end等同于steps(1,end):动画分成一步,动画实施时以最终端点为最早,暗中认可值为end.

steps 函数内定了贰个阶跃函数

看看W3C的规范 transition-timing-function

第一个参数钦赐了岁月函数中的间隔数量(必得是正整数)

steps第八个参数的荒唐的知情:

其次个参数可选,接受 start 和 end 五个值,钦命在各类间距的源点或是终点爆发阶跃变化,默认为 end。

steps(5,start)

step-start等同于steps(1,start),动画分成1步,动画实施时为起初侧面端点的部分为始发;

steps() 第几个参数 number 为钦点的间距数,即把动画分为 n 步阶段性呈现,推断大比很多人领略便是keyframes写的变迁次数。

step-end等同于steps(1,end):动画分成一步,动画实践时以最终端点为起首,默许值为end。

例如:

看看W3C的规范 transition-timing-function

@-webkit-keyframes circle {
        0% {}
        25%{}
        50%{}
        75%{}
        100%{}
 }

 

自个儿前面也一向感到steps(5,start)中的5 正是指的keyframes中的0% 六成 二分之一30% 百分百 分成5个区间等分。

steps第贰个参数的错误的领悟:

怎会冒出这种通晓错误,大家看三个例证:

steps(5,start)

keyframes的关键帧是唯有2个法规的时候,纵然咱们有一张400px长度的百事可乐图。

steps() 第二个参数 number 为钦定的间距数,即把动画分为 n 步阶段性浮现,推测大大多人知道正是keyframes写的转移次数

@-webkit-keyframes circle {
        0% {background-position-x: 0;}
        100%{background-position-x: -400px;}
 }

例如:

那会儿安装steps(5,start)那么会意识5张图会现身帧动画的功能,因为steps中的5把 0% – 百分百的平整,内部分成5个等分。

@-webkit-keyframes circle {
        0% {}
        25%{}
        50%{}
        75%{}
        100%{}
 }

实质上内部会施行那样贰个关键帧效果:

 

@-webkit-keyframes circle {
        0% {background-position-x: 0;}
        25% {background-position-x: -100px;}
        50% {background-position-x:-200px;}
        75%{background-position-x: -300px;}
        100%{background-position-x: -400px;}
 }

 

将这么些准则有一点点修改下,参预贰个四分之二的图景:

自己事先也直接感觉steps(5,start)中的5 便是指的keyframes中的0% 20% 二分之一百分之六十 百分百 分成5个区间等分

@-webkit-keyframes circle {
        0% {background-position-x: 0;}
        50% {background-position-x: -200px;}
        100%{background-position-x: -400px;}
 }

为啥会现出这种了解错误,大家看一个事例

那正是说等同用steps(5,start)效用就能够乱套。

keyframes的关键帧是独有2个准则的时候,若是我们有一张400px长度的Pepsi-Cola图

这时候您会很吸引,所以首要要明了第一个参数的针对点,首先引进一个焦点点:

@-webkit-keyframes circle {
        0% {background-position-x: 0;}
        100%{background-position-x: -400px;}
 }

timing-function 作用于每八个关键帧之间,而不是任何动画。

 

那么首先个参数很好精晓了,steps的设置都以本着八个关键帧之间的,而非是一切keyframes,所以首先个参数对

那儿安装steps(5,start)那么会意识5张图会出现帧动画的意义,因为steps中的5把 0% – 百分之百的法则,内部分成5个等分

  • 次数对应了历次steps的成形。

实际内部会进行那样叁个关键帧效果

换句话说也是 0-25 之间转移5次, 25-50时期 变化5次 ,50-75 之间变化5次,以此类推。

 

其次个参数可选,接受 startend 七个值,内定在每种间隔的源点或是终点发生阶跃变化,默以为 end.

@-webkit-keyframes circle {
        0% {background-position-x: 0;}
        25% {background-position-x: -100px;}
        50% {background-position-x:-200px;}
        75%{background-position-x: -300px;}
        100%{background-position-x: -400px;}
 }

透过案例看下 step-start,step-end 的区别:

 

@-webkit-keyframes circle {
        0% {background: red}
        50%{background: yellow}
        100% {background: blue}
    }

 

  • step-start : 浅莲红与湖蓝相互切换;
  • step-end : 草地绿与色情彼此切换;
将这个规则稍微修改下,加入一个50%的状态

@-webkit-keyframes circle {
        0% {background-position-x: 0;}
        50% {background-position-x: -200px;}
        100%{background-position-x: -400px;}
 }

2个参数都会选择性的跳过前后部分,start跳过0%,end跳过百分之百。

那么一样用steps(5,start)效果就能够乱套

  • step-start在转移进程中,都是以下一帧的显得效果来填充间距动画,所以0% 到 二分一 直接就显得了大青yellow.
  • step-end与地点相反,都以上述一帧的显示效果来填充间距动画,所以0% 到 二分之一 直接就展现了清水蓝red.

此刻您会很吸引,所以首要要精晓第二个参数的针对点,首先引进二个核心点:

引用w3c的一张step的行事体制图

timing-function 作用于每七个关键帧之间,并非整整动画

图片 7

那么首先个参数很好明白了,steps的安装都以对准几个关键帧之间的,而非是总体keyframes,所以首先个参数对

总结:

  • 次数对应了历次steps的浮动

steps函数,它能够流传五个参数,第二个是贰个大于0的整数,他是将间隔动画等分成内定数量的小间距动画,然后依照首个参数来调节展现效果。

换句话说也是 0-25 之间浮动5次,  25-50之内 变化5次 ,50-75 之间更改5次,依此类推

其次个参数设置后实际和step-start,step-end同义,在分成的小间隔动画中决断展现效果。能够见到:steps(1, start) 等于step-start,steps(1,end)等于step-end.

 

最焦点的少数就是:timing-function 功用于每多少个关键帧之间,并非百分百动画

第一个参数可选,接受 start 和 end 多少个值,钦命在每一种间隔的起源或是终点产生阶跃变化,默感觉 end

http://designmodo.com/steps-css-animations/

透过案例看下 step-start,step-end 的区别

 

@-webkit-keyframes circle {
        0% {background: red}
        50%{background: yellow}
        100% {background: blue}
    }

step-start : 日光黄与黑色相互切换

step-end  : 鲜绿与色情互相切换

2个参数都会选取性的跳过前后部分,start跳过0%,end跳过百分百

step-start在转换进度中,都是以下一帧的来得效果来填充间距动画,所以0% 到 百分之五十  直接就显得了铁锈红yellow

step-end与地点相反,都是以上一帧的显示效果来填充间隔动画,所以0% 到 二分一直接就显示了深绿red

引用w3c的一张step的工作体制图

图片 8

总结:

steps函数,它能够流传多少个参数,第叁个是一个大于0的平头,他是将间隔动画等分成钦定数量的小间距动画,然后依照首个参数来决定呈现效果。

第二个参数设置后其实和step-start,step-end同义,在分成的小间隔动画中推断突显效果。能够见到:steps(1, start) 等于step-start,steps(1,end)等于step-end

最中央的一些正是:timing-function 功能于每四个关键帧之间,实际不是全部动画

 

by Aaron:

 

本文由星彩网app下载发布于前端技术,转载请注明出处:深入精通CSS3

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。