深入明白CSS3

CSS 动画的 steps

2015/09/28 · CSS ·
动画

正文小编: 伯乐在线 –
深入明白CSS3。risker
。未经小编许可,禁止转发!
迎接参与伯乐在线 专栏撰稿人。

animation默认以ease措施连接,会以在各类关键帧之间插入补间动画,所以动画效果是连贯性的。easelinear等等等的连接函数都会为其插入补间。但有些功力不要求补间,只须要关键帧之间的跃进,那时应该运用steps连接形式。本文前面有案例。

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

大家通晓CSS3的Animation有七个属性

深远明白CSS3 Animation 帧动画

2015/07/13 · CSS ·
Animation

原文出处: Aaron
的博客   

CSS3自己在5年从前就有用了,包罗集团项目都直接在很前沿的技术。

日前在写慕课网的冬至节主旨,用了汪洋的CSS3动画,但是真的沉淀下来仔细的去长远CSS3卡通的相继属性发现仍然很深的,那里就写下关于帧动画steps属性的接头

咱俩知晓CSS3的Animation有八个属性

  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

中间1-7大多都有介绍,不过animation-timing-function是决定时间的习性

在取值中除去常用到的 五遍贝塞尔曲线 以外,还有个令人可比疑惑的?steps()
函数

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

除了ease,linear、cubic-bezier之类的连通函数都会为其插入补间。但有点功用不要求补间,只须求关键帧之间的踊跃,那时应该利用steps过渡格局

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

亚洲必赢官网 1

如上w3school网站上给的行使格局,不过漏掉一个很要紧的steps

粗略的来说,我们直接选取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;} }

1
2
3
4
5
6
7
8
9
10
11
12
13
.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那个值了,换句话就是没有连接的功力,而是一帧帧的变化

一如既往能够看测试帧动画

 

理解steps

steps 函数指定了一个阶跃函数

第二个参数指定了时光函数中的间隔数量(必须是正整数)

第三个参数可选,接受 start 和 end
五个值,指定在每个间隔的起源或是终点发生阶跃变化,默许为 end。

step-start等同于steps(1,start),动画分成1步,动画执行时为开始左侧端点的有些为初步;

step-end等同于steps(1,end):动画分成一步,动画执行时以最终端点为早先,默许值为end。

看看W3C的规范transition-timing-function

 

steps第二个参数的荒唐的驾驭:

steps(5,start)

steps() 第二个参数 number 为指定的间隔数,即把动画分为 n
步阶段性显示,算计超过一半人清楚就是keyframes写的变通次数

例如:

CSS

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

1
2
3
4
5
6
7
@-webkit-keyframes circle {
        0% {}
        25%{}
        50%{}
        75%{}
        100%{}
}

本人事先也直接以为steps(5,start)中的5 就是指的keyframes中的0% 25% 50%
75% 100% 分成5个区间等分

何以会并发那种领悟错误,大家看一个例子

keyframes的关键帧是唯有2个规则的时候,假使我们有一张400px长度的百事可乐图

CSS

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

1
2
3
4
@-webkit-keyframes circle {
        0% {<code>background-position-x: </code><code>0</code><code>;</code>}
        100%{<code>background-position-x: -400px;}
}

那会儿设置steps(5,start)那么会发觉5张图会出现帧动画的效果,因为steps中的5把
0% – 100%的条条框框,内部分成5个等分

实际上内部会履行那样一个关键帧效果

CSS

@-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;}
}

1
2
3
4
5
6
7
@-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;}
}

将以此规则有点修改下,出席一个50%的状态

CSS

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

1
2
3
4
5
@-webkit-keyframes circle {
        0% {background-position-x: 0;}
        50% {background-position-x: -200px;}
        100%{background-position-x: -400px;}
}

那么同样用steps(5,start)效果就会乱套

那时候你会很迷惑,所以最首要要明白首个参数的针对点,首先引入一个宗旨点:

timing-function 成效于每四个关键帧之间,而不是所有动画

那就是说首先个参数很好精晓了,steps的安装都是针对性四个关键帧之间的,而非是百分之百keyframes,所以率先个参数对
– 次数对应了每一次steps的生成

换句话说也是 0-25 之间变化5次,? 25-50之内 变化5次 ,50-75
之间转变5次,以此类推

 

其次个参数可选,接受 start 和 end
五个值,指定在各类间隔的起源或是终点暴发阶跃变化,默认为 end

因而案例看下step-start,step-end的区别

CSS

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

1
2
3
4
5
@-webkit-keyframes circle {
        0% {background: red}
        50%{background: yellow}
        100% {background: blue}
    }

step-start: 粉红色与紫色相互切换

step-end : 粉红色与色情相互切换

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

step-start在变更进程中,都是以下一帧的浮现效果来填充间隔动画,所以0% 到
50%? 直接就显得了粉色yellow

step-end与地点相反,都是以上一帧的突显效果来填充间隔动画,所以0% 到 50%
间接就显得了蓝色red

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

亚洲必赢官网 2

总结:

steps函数,它可以流传多少个参数,第二个是一个大于0的平头,他是将距离动画等分成指定数量的小间隔动画,然后依照首个参数来控制显示效果。

第四个参数设置后其实和step-start,step-end同义,在分成的小间隔动画中判断呈现效果。可以看出:steps(1,
start) 等于step-start,steps(1,end)等于step-end

最要旨的一些就是:timing-function
功能于每八个关键帧之间,而不是百分之百动画

1 赞 3 收藏
评论

亚洲必赢官网 3

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% -> 25% 的时候,steps(1)
间接一步到位,眨眼间间从0%的境况跳到25%的意况,而steps(4)会逐年走4步,即从
0% -> 25% 要跳 4 步 !

逐步体会一下,应该就了解steps的功用了啊

日前在写慕课网的冬至节主旨,用了汪洋的CSS3动画片,可是的确沉淀下来仔细的去长远CSS3卡通的顺序属性发现照旧很深的,那里就写下有关帧动画steps属性的精通。

个中1-7大概都有介绍,可是animation-timing-function是控制时间的性质

案例 – 控制台功用

先戳 demo

此间就是steps(1,start) ,动画又是唯有 0%(100%) 、 50%
多个情景,所以一贯一步跳跃,直接走完。

你可以改成steps(4),就更能精通steps的意义了

咱俩精晓CSS3的Animation有多少个特性:

在取值中除了常用到的 三遍贝塞尔曲线 以外,还有个令人比较困惑的 steps()
函数

案例 – 人人网首页效果

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

亚洲必赢官网 4

再戳demo

一步一步分析:

  • 第一,大家不加动画,就像是s1
  • 然后,加animation唯独没有steps,像s2那样。这样很想获得是还是不是,就是因为没有steps,动画是贯穿的,所以我们见到了跑马灯似的效果:亚洲必赢官网 5
  • 末段,当然是大家的顶峰效果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

亚洲必赢官网 6

二〇一四年大学完成学业,现在在京城某互连网公司从事前端开发的干活,近三个月主要做运动web开发。腾讯网粉丝太少,求粉。

个人主页 ·
我的篇章 ·
7 ·
  

亚洲必赢官网 7

animation默认以ease方法连接,它会在各样关键帧之间插入补间动画,所以动画效果是连贯性的。

 

除了easelinearcubic-bezier等等的过渡函数都会为其插入补间。但有点作用不需求补间,只须求关键帧之间的踊跃,那时应该运用steps过渡方式。

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

animation-timing-function 规定动画的速度曲线

亚洲必赢官网 8

亚洲必赢官网 9

上述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% 25% 50%
75% 100% 分成5个区间等分。

steps首个参数的失实的接头:

何以会产出那种领悟错误,大家看一个例子:

steps(5,start)

keyframes的关键帧是唯有2个规则的时候,假若我们有一张400px长度的Coca Cola图。

steps() 第三个参数 number 为指定的间隔数,即把动画分为 n
步阶段性体现,推断半数以上人领悟就是keyframes写的变化次数

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

例如:

那会儿设置steps(5,start)那就是说会意识5张图会出现帧动画的功效,因为steps中的5把
0% – 100%的规则,内部分成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;}
 }

 

将以此规则有点修改下,参与一个50%的景况:

自身从前也一贯以为steps(5,start)中的5 就是指的keyframes中的0% 25% 50%
75% 100% 分成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长度的七喜图

此刻您会很迷惑,所以主要要通晓第三个参数的针对点,首先引入一个宗旨点:

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

timing-function 功能于每多个关键帧之间,而不是一体动画。

 

那就是说首先个参数很好领悟了,steps的装置都是针对多少个关键帧之间的,而非是整体keyframes,所以首先个参数对

那时设置steps(5,start)那么会发现5张图会现身帧动画的职能,因为steps中的5把
0% – 100%的规则,内部分成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跳过100%。

那么同样用steps(5,start)效果就会乱套

  • step-start在转移进度中,都是以下一帧的显得效果来填充间隔动画,所以0%
    到 50% 直接就呈现了黑色yellow.
  • step-end与地点相反,都是以上一帧的来得效果来填充间隔动画,所以0% 到
    50% 直接就突显了青色red.

此刻您会很迷惑,所以首要要通晓首个参数的针对点,首先引入一个焦点点:

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

timing-function 作用于每三个关键帧之间,而不是全体动画

亚洲必赢官网 10

那就是说首先个参数很好领会了,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

How to Use steps() in 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跳过100%

step-start在变化进程中,都是以下一帧的显得效果来填充间隔动画,所以0% 到
50%  直接就浮现了青色yellow

step-end与地方相反,都是以上一帧的展示效果来填充间隔动画,所以0% 到 50%
直接就显示了青色red

引用w3c的一张step的干活机制图

亚洲必赢官网 11

总结:

steps函数,它可以流传三个参数,首个是一个大于0的平头,他是将间隔动画等分成指定数量的小间隔动画,然后按照第一个参数来支配突显效果。

第一个参数设置后实在和step-start,step-end同义,在分成的小间隔动画中判断展现效果。可以看来:steps(1,
start) 等于step-start,steps(1,end)等于step-end

最大旨的少数就是:timing-function
作用于每多个关键帧之间,而不是任何动画

 

by Aaron:

 

网站地图xml地图