金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > 深入理解CSS3

深入理解CSS3

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-11-09 19:47

CSS 动画的 steps

2015/09/28 · CSS · 动画

本文作者: 伯乐在线 - risker 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

animation默认以ease方式过渡,会以在每个关键帧之间插入补间动画,所以动画效果是连贯性的。easelinear等之类的过渡函数都会为其插入补间。但有些效果不需要补间,只需要关键帧之间的跳跃,这时应该使用steps过渡方式。本文后面有案例。

深入理解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

我们知道CSS3的Animation有八个属性

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 步,动画执行时以结尾端点为开始

没懂对不对?我也没懂,上面是官方的说法。接着往下看吧

  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的作用了吧

其中1-7大多都有介绍,但是animation-timing-function是控制时间的属性

案例 – 控制台效果

先戳 demo

这里就是steps(1,start) ,动画又是只有 0%(100%) 、 50% 两个状态,所以直接一步跳跃,直接走完。

你可以改成steps(4),就更能知道steps的作用了

在取值中除了常用到的 三次贝塞尔曲线 以外,还有个让人比较困惑的 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。但愿以后我们能够做到让每一个用户都满意。

animation默认以ease方式过渡,它会在每个关键帧之间插入补间动画,所以动画效果是连贯性的

参考

  • 利用css3-animation来制作逐帧动画

    1 赞 1 收藏 评论

除了ease,linear、cubic-bezier之类的过渡函数都会为其插入补间。但有些效果不需要补间,只需要关键帧之间的跳跃,这时应该使用steps过渡方式

关于作者:risker

金沙棋牌官方平台 6

2014年大学毕业,现在在北京某互联网公司从事前端开发的工作,近半年主要做移动web开发。微博粉丝太少,求粉。 个人主页 · 我的文章 · 7 ·   

金沙棋牌官方平台 7

 

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

金沙棋牌官方平台 8

以上w3school网站上给的使用方法,但是漏掉一个很重要的 steps

简单的来说,我们一直使用animation基本都是实现线性渐变的动画

  • 位置在固定的时间从起点到终点
  • 尺寸在固定的时间线性变化
  • 颜色的线性改变等等

看效果 线性动画

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

 

 

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写的变化次数

例如:

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

 

 

我之前也一直认为steps(5,start)中的5 就是指的keyframes中的0% 25% 50% 75% 100% 分成5个间隔等分

为什么会出现这种理解错误,我们看一个例子

keyframes的关键帧是只有2个规则的时候,假如我们有一张400px长度的雪碧图

@-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% {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跳过100%

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

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

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

金沙棋牌官方平台 9

总结:

steps函数,它可以传入两个参数,第一个是一个大于0的整数,他是将间隔动画等分成指定数目的小间隔动画,然后根据第二个参数来决定显示效果。

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

最核心的一点就是:timing-function 作用于每两个关键帧之间,而不是整个动画

 

by Aaron:

 

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:深入理解CSS3

关键词: