深深精通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 规定动漫的进程曲线

如上w3school网址上给的使用情势，不过漏掉八个很关键的steps

简短的来讲，大家直接使用animation基本都以贯彻线性渐变的卡通

如

• 9159.com ，任务在稳住的时间从源点到终点
• 尺寸在牢固的日子线性别变化化
• 水彩的线性改造等等

看效果线性动画

截取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 函数内定了四个阶跃函数

首先个参数钦命了时间函数中的间距数量（必需是正整数卡塔尔

第4个参数可选，选拔 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% 十分之三 四分之二四分三五 百分百 分成5个区间等分

干什么会产出这种领会错误，大家看一个例证

keyframes的关键帧是唯有2个法则的时候，若是我们有一张400px长度的Sprite图

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

将这一个法规有一点点改过下，参加三个二分之一的意况

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跳过百分百

step-start在扭转历程中，都以以下生机勃勃帧的来得效果来填充间距动漫，所以0% 到 50%? 直接就体现了水晶绿yellow

step-end与地点相反，都是上述生龙活虎帧的呈现效果来填充间距动漫，所以0% 到 一半直接就呈现了日光黄red

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

总结：

steps函数，它能够流传三个参数，第叁个是三个大于0的子弹头，他是将间距动画等分成钦命数量的小间距动漫，然后依据第二个参数来支配呈现效果。

第叁个参数设置后实际和step-start，step-end同义，在分成的小间距动漫中判定突显效果。能够看见：steps(1, start) 等于step-start，steps(1,end)等于step-end

最中央的某个正是：timing-function 功能于每七个关键帧之间，实际不是意气风发体动漫

1 赞 3 收藏 评论

大家了然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

CSS3 实际上是利用animation-timing-function的阶梯函数steps(number_of_steps, direction)来实现逐帧动漫的连年播发的。

中间1-7差不离都有介绍，然则animation-timing-function是调整时间的质量

在移动端，CSS3 Animation 包容性杰出，相对于 JS，CSS3 逐帧动漫使用简便，且功能更加高，因为大多优化都在浏览器底层达成。

在取值中除去常用到的 三回贝塞尔曲线 以外，还应该有个令人可比纠葛的 steps() 函数

逐帧动漫有两样的卡通帧，大家能够透过校正background-image的值完毕帧的切换，但多张图纸会带给多少个HTTP 央求，且不便利文件的保管。

animation暗中认可以ease形式接入，它会在各类关键帧之间插入补间动漫，所以动漫效果是连贯性的

比较确切的做法，是将具备的动画帧归拢成一张图，通过转移background-position的值来完结动画帧切换。因而，逐帧动漫也被喻为“精灵动漫（sprite animation卡塔 尔（阿拉伯语：قطر‎”。

除此之外ease，linear、cubic-bezier之类的连结函数都会为其插入补间。但稍事效果与利益不须求补间，只须要关键帧之间的跳跃，那个时候应该使用steps过渡方式

以京东到家的触屏页面《年货送到家》为例：

 

那个动画四个有三帧，将3个动漫帧合并，并放到.p8 .page_key的背景中：

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

如上w3school网址上给的施用格局，可是漏掉二个很首要的 steps

（2卡塔尔使用 steps 落成动漫播放

简短的来讲，大家一向选择animation基本都以落到实处线性渐变的动漫片

steps 钦定了叁个台阶函数，包蕴四个参数：

如

1. 第三个参数钦赐了函数中的间距数量（必需是正整数卡塔尔国；

• 岗位在定位的光阴从源点到终端
• 尺寸在固定的大运线性别变化化
• 水彩的线性改善等等

2. 次之个参数可选，钦赐在每个间隔的起源或是终点爆发阶跃变化，选拔 start 和 end 三个值，私下认可为end。（参谋自W3C）

看效果 线性动画

通过W3C中的那张图纸来精通steps 的行事体制：

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

重返上述的例证，我们在 keyframes 中定义好种种动漫帧：

 

 

然后，给她增多animation：

timing-function:linear 定义的是二个匀速变化的动漫片，正是在2秒内，从水绿过度到铁锈红到色情，是一个很线性的水彩变化

只要要促成帧动画功效并不是线性的变化就供给引入step这一个值了，换句话就是未有连通的功能，而是意气风发帧帧的调换

缘何第二个参数是1？

无差距于能够看测量检验 帧动画

前文中涉及，steps 是animation-timing-function的贰个属性值，在W3C中宛如下表明：

 

For a keyframed animation, the ‘animation-timing-function’ applies between keyframes, not over the entire animation.

理解steps

也正是说，animation-timing-function应该于多个 keyframes 之间，而非整个动漫。在下边包车型的士 keyframes 中，大家曾经把各类帧都写出来了，所以四个 keyframes 之间的间隔是1。

steps 函数钦赐了叁个阶跃函数

更是简便易行的写法？

第一个参数钦赐了时光函数中的间距数量（必得是正整数卡塔 尔（英语：State of Qatar）

既然如此说 steps 第三个参数是指函数的区间数量，那么大家即可把 keyframes 的推断间接付出 steps 来产生。

其次个参数可选，选择 start 和 end 八个值，钦命在各种间距的源点或是终点产生阶跃变化，默感到 end。

step-start等同于steps(1,start)，动漫分成1步，动画实行时为始发侧面端点的片段为起初；

如上三种写法效果是平等的。

step-end等同于steps(1,end)：动漫分成一步，动漫施行时以最后端点为早先，暗许值为end。

CSS3 逐帧动漫使用技巧

看看W3C的规范 transition-timing-function

（1）step-start 与 step-end

 

而外steps函数，animation-timing-function还会有多少个与逐帧动漫相关的属性值step-start与step-end：

steps第三个参数的不当的驾驭：

1. step-start等同于steps(1,start)：动漫奉行时以起始端点为带头；

steps(5，start)

2. step-end等同于steps(1,end)：动漫施行时以最终端点为发端。

steps() 第一个参数 number 为钦赐的间距数，即把动漫分为 n 步阶段性体现，预计大许多人理解就是keyframes写的成形次数

（2卡塔尔国动画帧的测算：

例如:

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

（3卡塔 尔（阿拉伯语：قطر‎适配方案：rem+scale

 

大家领略，rem 的精兵简政会设有相对误差，因而使用Coca Cola图时大家并不推荐用 rem。即便是逐帧动画的话，由于计算的绝对误差，会现身震荡的情景。

 

那正是说在触屏页中，如何得以已毕页面包车型客车适配？

自家后边也平昔以为steps(5，start卡塔 尔（阿拉伯语：قطر‎中的5 就是指的keyframes中的0% 百分之二十五 四分之二十分之四 百分之百 分成5个区间等分

那边小编提供贰个思路：

何以会冒出这种精通错误，大家看贰个例子

1. 非逐帧动漫部分，使用rem做单位；

keyframes的关键帧是唯有2个准绳的时候，假若大家有一张400px长度的Coca Cola图

2. 逐帧动漫部分，使用px做单位，再组成js对动漫部分使用scale实行缩放。

@-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% {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%的状态

@-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 的区别

 

@-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的劳作体制图

总结：

steps函数，它能够流传多少个参数，第多少个是五个大于0的平头，他是将间距动漫等分成钦点数量的小间隔动画，然后依据第一个参数来调控显示效果。

第一个参数设置后实在和step-start，step-end同义，在分成的小间距动漫中判别展现效果。能够看来：steps(1, start) 等于step-start，steps(1,end)等于step-end

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

 

by Aaron：

 

本文由9159.com发布于前端,转载请注明出处：逐帧动画使用简单，这里就写下关于帧动画step

关键词：