长远精通CSS叁

By admin in 4858美高梅 on 2019年5月2日

CSS 动画的 steps

2015/09/28 · CSS ·
动画

本文小编: 伯乐在线 –
risker
。未经笔者许可,禁止转发!
欢迎插足伯乐在线 专栏撰稿人。

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

深入理解CSS三 Animation 帧动画

2015/07/13 · CSS ·
Animation

原来的书文出处: Aaron
的博客   

CSS3作者在5年此前就有用了,包含公司项目都一贯在很前沿的才具。

多年来在写慕课网的七姐诞大旨,用了汪洋的CSS三动画片,可是的确沉淀下来仔细的去深刻CSS3卡通的逐条属性发掘照旧很深的,这里就写下关于帧动画steps属性的精通

咱俩通晓CSS三的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

其间一-7基本上都有介绍,不过animation-timing-function是决定时期的属性

在取值中除了常用到的 三回贝塞尔曲线 以外,还有个令人相比较质疑的?长远精通CSS叁。steps()
函数

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

除去ease,linear、cubic-bezier之类的过渡函数都会为其插入补间。但有点功力不须求补间,只必要关键帧之间的弹跳,那时应该使用steps过渡情势

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

4858美高梅 1

如上w三school网址上给的采用格局,不过漏掉贰个很关键的steps

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

  • 地方在一定的日子从起源到巅峰
  • 尺寸在稳定的时刻线性别变化化
  • 颜色的线性改变等等

看效果线性动画

截取CSS如下

CSS

.test1 { width: 90px; height: 60px; -webkit-animation-name: skyset;
-webkit-animation-duration: 2000ms; -webkit-animation-iteration-count:
infinite; /*Infiniti循环*/ -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(一,start),动画分成壹步,动画执行时为始发左边端点的1部分为起始;

step-end等同于steps(一,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(伍,start)中的5 正是指的keyframes中的0% 二伍% 3/6百分之七十五 百分之百 分成八个区间等分

为啥会出现这种明白错误,我们看3个例证

keyframes的关键帧是唯有贰个规则的时候,固然我们有一张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% – 百分之百的规则,内部分成伍个等分

实则内部会施行那样一个关键帧效果

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

将以此规则有点修改下,参加二个1/2的情况

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-二5 之间调换八次,? 25-50时期 变化陆次 ,50-7五之间转移六遍,就那样类推

 

首个参数可选,接受 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跳过百分百

step-start在变化进程中,都以以下一帧的显示效果来填充间隔动画,所以0% 到
5/10? 直接就显得了深藕红yellow

step-end与地点相反,都以上述1帧的显得效果来填充间隔动画,所以0% 到 3/6直接就展示了紫红red

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

4858美高梅 2

总结:

steps函数,它可以流传多个参数,第一个是1个大于0的整数,他是将距离动画等分成钦赐数量的小间隔动画,然后依据第一个参数来支配展现效果。

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

最基本的一些正是:timing-function
成效于每三个关键帧之间,而不是全数动画

1 赞 3 收藏
评论

4858美高梅 3

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

大家知晓CSS三的Animation有伍本性子

steps用法

简单的说地说,正是原先三个动静向另一个动静的交接是平整的,steps能够兑现布满过渡。steps用法
:

CSS

steps(n,[start | end])

1
steps(n,[start | end])

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

  • step-start 等同于 steps(1,start) ,动画分成 一步,动画试行时以左手端点为发端
  • step-end 等同于 steps(1,end) ,动画分成 1步,动画推行时以最后端点为早先

没懂对不对?笔者也没懂,上边是官方的说法。接着往下看吗

CSS三自个儿在伍年此前就有用了,包含公司项目都向来在很前沿的才干。

  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% -> 四分之一 的时候,steps(1)
直接一步到位,弹指间从0%的场地跳到25%的场所,而steps(4)会逐步走四步,即从
0% -> 贰伍% 要跳 4 步 !

逐步体会一下,应该就知晓steps的效能了吧

近年在写慕课网的七巧节核心,用了大气的CSS三卡通,可是真正沉淀下来仔细的去深刻CSS3动画片的次第属性发掘依然很深的,这里就写下有关帧动画steps属性的知道。

里头1-七大多都有介绍,然则animation-timing-function是决定时期的性情

案例 – 调整台效益

先戳 demo

此处就是steps(1,start) ,动画又是唯有 0%(百分百) 、 二分一多个状态,所以一贯一步跳跃,直接走完。

你能够改成steps(4),就更能明了steps的法力了

咱们驾驭CSS三的Animation有多个属性:

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

案例 – 人人网首页效果

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

4858美高梅 4

再戳demo

一步一步分析:

  • 首先,大家不加动画,就如s1
  • 然后,加animation只是未有steps,像s2那么。那样很古怪是或不是,正是因为从没steps,动画是贯穿的,所以大家看来了跑马灯似的效果:4858美高梅 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个用户都如意。

  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格局衔接,它会在各样关键帧之间插入补间动画,所以动画效果是连贯性的

参考

  • 选择css叁-animation来创造逐帧动画

    1 赞 1 收藏
    评论

里头一-7几近都有介绍,可是animation-timing-function是决定时间的品质,在取值中除了常用到的
一遍贝塞尔曲线 以外,还有个令人可比思疑的 steps() 函数

除去ease,linear、cubic-bezier之类的连结函数都会为其插入补间。但稍事功用无需补间,只需求关键帧之间的跃进,那时应该运用steps过渡方式

有关小编:risker

4858美高梅 6

201四年大学结业,未来在首都某网络集团从事前端开采的劳作,近半年第一做活动web开荒。新浪观者太少,求粉。

个人主页 ·
笔者的小说 ·
7 ·
  

4858美高梅 7

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

 

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

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

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

4858美高梅 8

4858美高梅 9

上述w三school网址上给的利用方法,不过漏掉3个很注重的 steps

上述w三school网址上给的利用办法,然则漏掉叁个很关键的** 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
定义的是1个匀速变化的动画片,就是在2秒内,从赫色过度到石绿到色情,是3个很线性的颜料变化。

 

假诺要兑现帧动画功效而不是线性的成形就须求引进step其一值了,换句话正是未有连接的机能,而是1帧帧的转换。

 

同样可以看测试
帧动画

timing-function:linear
定义的是一个匀速变化的动画,正是在二秒内,从浅蓝过度到棕黑到色情,是2个很线性的颜料变化

理解steps

若果要促成帧动画功能而不是线性的更换就供给引进step那几个值了,换句话正是未有接通的法力,而是一帧帧的退换

steps 函数钦定了贰个阶跃函数。

坚持能够看测试 帧动画

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

 

第二个参数可选,接受 startend
五个值,钦赐在每一个间隔的起源或是终点爆发阶跃变化,默以为 end.

理解steps

  • step-start等同于steps(1,start),动画分成一步,动画试行时为初叶右侧端点的一对为始发;
  • step-end等同于steps(1,end):动画分成一步,动画实践时以最后端点为开端,暗中认可值为end.

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

看看W3C的规范
transition-timing-function

首先个参数钦点了光阴函数中的间隔数量(必须是正整数)

steps第二个参数的荒谬的精晓:

其次个参数可选,接受 start 和 end
七个值,钦命在每一种间隔的源点或是终点发生阶跃变化,默以为 end。

steps(5,start)

step-start等同于steps(一,start),动画分成一步,动画实践时为始发右侧端点的局地为开端;

steps() 第3个参数 number 为钦点的间隔数,即把动画分为 n
步阶段性突显,估算大繁多人知道正是keyframes写的生成次数。

step-end等同于steps(一,end):动画分成一步,动画实行时以最后端点为开首,暗中同意值为end。

例如:

看看W3C的规范 transition-timing-function

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

 

自身从前也一贯感觉steps(5,start)中的5 就是指的keyframes中的0% 四分之一 5/拾伍分之三 百分百 分成4个区间等分。

steps第3个参数的不当的知晓:

缘何会出现那种掌握错误,大家看二个例子:

steps(5,start)

keyframes的关键帧是唯有3个规则的时候,要是大家有一张400px长度的雪碧图。

4858美高梅 ,steps() 第3个参数 number 为钦命的间隔数,即把动画分为 n
步阶段性体现,推测大诸多人驾驭便是keyframes写的变迁次数

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

例如:

那时候设置steps(5,start)那么会开掘5张图会出现帧动画的效用,因为steps中的5把
0% – 百分百的平整,内部分成四个等分。

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

其实内部会推行那样2个关键帧效果:

 

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

 

将以此规则有点修改下,参与2个百分之五10的图景:

自家前边也直接认为steps(5,start)中的伍 就是指的keyframes中的0% 二5% 四分之二百分之七10五 百分百 分成四个区间等分

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

为何会现出那种明白错误,大家看二个例子

那就是说一样用steps(5,start)职能就能够乱套。

keyframes的关键帧是唯有一个规则的时候,假若大家有一张400px长度的Pepsi-Cola图

那会儿您会很吸引,所以最重要要知道第贰个参数的针对点,首先引进叁个焦点点:

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

timing-function 成效于每八个关键帧之间,而不是全方位动画。

 

那就是说首先个参数很好精通了,steps的装置都以指向七个关键帧之间的,而非是任何keyframes,所以首先个参数对

那儿设置steps(伍,start)那么会发觉伍张图会出现帧动画的意义,因为steps中的伍把
0% – 百分之百的平整,内部分成四个等分

  • 次数对应了历次steps的变通。

实际内部会实践那样八个关键帧效果

换句话说也是 0-25 之间变化捌次, 二5-50里边 变化柒次 ,50-75之间改变五次,就那样类推。

 

其次个参数可选,接受 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;}
 }

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

那正是说相同用steps(五,start)效果就能够乱套

  • step-start在扭转历程中,都以以下一帧的显得效果来填充间隔动画,所以0%
    到 四分之二 直接就展现了北京蓝yellow.
  • step-end与地点相反,都以上述一帧的来得效果来填充间隔动画,所以0% 到
    3/陆 直接就浮现了紫蓝red.

那时候您会很吸引,所以最首要要精通第叁个参数的针对点,首先引进一个主题点:

引用w3c的一张step的办事机制图

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

4858美高梅 10

那么首先个参数很好精通了,steps的安装都以针对性两个关键帧之间的,而非是1体keyframes,所以率先个参数对

总结:

  • 次数对应了每一回steps的改造

steps函数,它能够流传两个参数,第3个是三个大于0的平头,他是将距离动画等分成内定数量的小间隔动画,然后根据第三个参数来支配显示效果。

换句话说也是 0-二伍 之间转移五次,  25-50里面 变化7遍 ,50-75之间浮动六次,依此类推

第1个参数设置后实际和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  : 彩虹色与色情相互切换

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

step-start在转移进程中,都以以下1帧的显得效果来填充间隔动画,所以0% 到
5/十  直接就显得了浅绿灰yellow

step-end与地点相反,都以以上一帧的来得效果来填充间隔动画,所以0% 到 百分之五10间接就显得了石绿red

引用w3c的一张step的办事机制图

4858美高梅 11

总结:

steps函数,它可以流传多个参数,第1个是一个大于0的平头,他是将间距动画等分成钦定数量的小间隔动画,然后依据第三个参数来支配呈现效果。

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

最中央的少数就是:timing-function
作用于每五个关键帧之间,而不是全方位动画

 

by Aaron:

 

发表评论

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

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有