深远理解CSS3 Animation 帧动画【彩民之家高手论坛

2019-10-11 12:50 来源:未知

深深驾驭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% 60% 二分一肆分一 百分之百 分成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% – 百分之百的法规,内部分成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)效果就能乱套

那时候您会很吸引,所以最首要要驾驭第4个参数的针对点,首先引进贰个宗旨点:

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% 到 八分之四? 间接就展现了浅紫蓝yellow

step-end与地方相反,都以以上一帧的显得效果来填充间距动画,所以0% 到 百分之五十直接就展现了石青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

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

那会儿安装steps(5,start)那么会发掘5张图会出现帧动画的职能,因为steps中的5把 0% – 百分之百的准绳,内部分成5个等分

上述w3school网址上给的选拔方法,但是漏掉三个很要紧的 steps

 

  • 职位在固定的光阴从源点到极限
  • 尺寸在定点的年月线性别变化化
  • 水彩的线性退换等等

这时候你会很吸引,所以最首要要清楚首个参数的针对点,首先引进一个宗旨点:

step-end  : 天青与色情互相切换

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

keyframes的关键帧是唯有2个准则的时候,借使大家有一张400px长度的百事可乐图

 

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

 

何以会并发这种精晓错误,我们看多少个例子

理解steps

  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基本都以兑现线性渐变的动画片

 

step-end与位置相反,都以以上一帧的显示效果来填充间距动画,所以0% 到 四分之二直接就显得了卡其灰red

steps函数,它能够流传七个参数,第二个是贰个大于0的子弹头,他是将间隔动画等分成钦命数量的小间隔动画,然后依据第4个参数来支配展现效果。

 

step-start : 茶褐与墨绛红相互切换

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

steps(5,start)

彩民之家高手论坛 4

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

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

第一个参数可选,接受 start 和 end 多个值,钦点在各种间距的起源或是终点爆发阶跃变化,默感到 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;}
 }

深远理解CSS3 Animation 帧动画【彩民之家高手论坛】。 

 

截取CSS如下

一模一样能够看测验 帧动画

step-start在变化进程中,都是以下一帧的显得效果来填充间隔动画,所以0% 到 十分之五  间接就体现了铁黄yellow

 

最宗旨的一点就是:timing-function 效能于每八个关键帧之间,并不是全部动画

彩民之家高手论坛 5

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

而外ease,linear、cubic-bezier之类的连片函数都会为其插入补间。但多少效果没有须求补间,只需求关键帧之间的弹跳,那时应该使用steps过渡方式

 

看效果 线性动画

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

换句话说也是 0-25 之间浮动5次,  25-50之间 变化5次 ,50-75 之间转移5次,就这样推算

将这个规则稍微修改下,加入一个50%的状态

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

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

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

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

steps第一个参数的不当的领悟:

timing-function:linear 定义的是二个匀速变化的动画,正是在2秒内,从革命过度到中湖蓝到色情,是二个很线性的水彩变化

 

假若要落到实处帧动画作用并不是线性的转移就要求引进step那一个值了,换句话就是未有连接的意义,而是一帧帧的变型

总结:

我们掌握CSS3的Animation有七个属性

先是个参数钦命了岁月函数中的间距数量(必得是正整数)

那正是说首先个参数很好精晓了,steps的安装都以对准四个关键帧之间的,而非是任何keyframes,所以率先个参数对

 

在那之中1-7可能都有介绍,不过animation-timing-function是调控时间的天性

timing-function 功用于每八个关键帧之间,实际不是整整动画

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

看看W3C的规范 transition-timing-function

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

 

steps() 第一个参数 number 为钦赐的间隔数,即把动画分为 n 步阶段性展现,测度大相当多人通晓就是keyframes写的成形次数

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

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

by Aaron:

  • 次数对应了每一回steps的改换
@-webkit-keyframes circle {
        0% {}
        25%{}
        50%{}
        75%{}
        100%{}
 }

本身前边也平昔感到steps(5,start)中的5 就是指的keyframes中的0% 三分之一 四分之二四分三 百分之百 分成5个区间等分

例如:

step-end等同于steps(1,end):动画分成一步,动画实践时以最终端点为发端,私下认可值为end。

TAG标签: 动画 css
版权声明:本文由彩民之家高手论坛发布于前端知识,转载请注明出处:深远理解CSS3 Animation 帧动画【彩民之家高手论坛