深入精通CSS3

CSS 动画的 steps

2015/09/28 · CSS ·
动画

本文作者: 伯乐在线 –
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写的变通次数

深入精通CSS3。例如:

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长度的Coca Cola图

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

二〇一四年大学结束学业,以往在人吉市某互连网公司从事前端开发的做事,近7个月第一做活动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长度的百事可乐图。

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长度的7-Up图

此时您会很迷惑,所以最首要要明白第四个参数的针对点,首先引入一个大旨点:

@-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:

 

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website