Fork me on GitHub

CSS动画之初探API

CSS3动画

构建CSS3动画的主要方式有transform(变形),transition(过渡),animation(动画)三种

CSS动画

在开始之前:先比较一下CSS动画和JS动画的优缺点

CSS动画

  • 优点:
    1、写法简单、高效
    2、不依赖于主线程,可采用硬件加速(GPU)
    3、除了硬件加速,浏览器还会使用类似于requestAnimation的方式进行性能优化

  • 缺点:
    1、运行过程控制较弱,无法附加事件绑定回调函数。CSS动画只能暂停,不能在动画中寻找一个特定的时间点,不能在半路反转动画,不能变换时间尺度,不能在特定的位置添加回调函数或是绑定回放事件,无进度报告
    2、代码简单但是一旦业务复杂容易导致代码过长
    3、不同的动画难以实现同步

JS动画

  • 优点:
    1、JavaScript动画控制能力很强, 可以在动画播放过程中对动画进行控制:开始、暂停、回放、终止、取消都是可以做到的。
    2、动画效果比css3动画丰富,有些动画效果,比如曲线运动,冲击闪烁,视差滚动效果,只有JavaScript动画才能完成
    3、CSS3有兼容性问题,而JS大多时候没有兼容性问题
    4、可以使用requestAnimation进行性能优化

  • 缺点:
    1、JavaScript在浏览器的主线程中运行,而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞,从而造成丢帧的情况。
    2、代码的复杂度高于CSS动画

transform(变形)

直接改变大小和位置,没有过渡和变形时间,只有变换后的状态。该属性只对block级属性有效

transform-origin

所有的transform的变换基准都是transform-origin,即变换的原点。

我们可以通过特定的参数来更改变换的原点,该方法可接受1~3个参数:
一个值的情况:
<length>, <percentage>, 或left, center, right, top, bottom关键字中的一个

两个值的情况:
其中一必须是<length>, <percentage>, 或left, center, right关键字中的一个
另一个必须是<length>, <percentage>, 或top, center, bottom关键字中的一个

三个值的情况:
前两个值和只有两个值时的用法相同
第三个值必须是<length>,它始终代表Z轴偏移量

了解了原点后,我们可以来看下transform有哪些方法了:

scale 缩放

该方法接收1~2个 数字 参数,分别对应X轴和Y轴,数值代表缩放倍数

1
transform: scale(sx[,sy]); /* one or two unitless <number>s, e.g. scale(2,4) */

也可以单独写成X方向、Y方向、Z方向缩放,以及3D缩放:

1
2
3
4
transform: scaleX(sx); /* a unitless <number>, e.g.  scaleX(2.7) */
transform: scaleY(sy); /* a unitless <number>, e.g. scaleY(0.3) */
transform: scaleZ(sy); /* a unitless <number>, e.g. scaleZ(0.3) */
transform: scale3d(x,y,z); /* three unitless <number>, e.g. scaleZ(0.3, 0.2, 0.6) */

rotate 旋转

该方法接收一个 角度 参数,由原点开始按照顺时针方向(若为负值则为逆时针),将元素按指定的角度旋转。
其写法与scale相同,也包含单独X方向、Y方向、Z方向缩放,以及3D缩放。

translate 平移

该方法接收1~2个参数,可以是 长度或者百分比 ,分别对应X轴和Y轴,数值代表缩放倍数。写法与上述方法相同,同理也可以单独写成X方向、Y方向、Z方向、3D方向平移。

skew 斜切

该方法接收1~2个角度参数,分别对应X轴和Y轴,数值代表缩放倍数。写法与上述方法相同,但是无Z方向变换,无3D变换

transition(过渡)

简单来说,transition就是指某个元素的某个属性(如height、width等)从a状态转变到b状态的过程。

与transform相比,transition会有过渡时间和形变时间。

该方法接受四个参数:

1
transition: property duration timing-function delay;

transition-property

规定设置过渡效果的CSS属性的名称,类似于监听事件。默认值:默认为监听所有属性变化

设置监听以后可以通过改变监听的属性来触发transition,如通过:hover,:focus,checked等来改变

transition-duration

规定完成过渡效果需要多少秒或毫秒。默认值:0

PS:请始终设置transition-duration属性,否则时长为0,不会产生过渡效果。

transition-timing-function

规定速度效果的速度曲线。默认值:ease
具体有以下几种值可指定:
linear:动画从头到尾速度相同
ease:动画以低俗开始,然后加快,在结束前变慢
ease-in:动画以低速开始
ease-out:动画以低速结束
ease-in-out:动画以低速开始和结束
cubic-bezier(n,n,n,n):根据三次贝塞尔函数,生成速度曲线

transition-delay

定义过渡效果延迟多久开始。默认值:0

animation(动画)

animation可以看作是transition的增强版,可以理解成多个transition或transform的叠加,并且可操作性更强。相比于transition,animation多了四种属性animation-iteration-count,animation-direction,animation-play-state,aniamtion-fill-mode

animation-name

指定监听的keyframes:(在keyframes里设置每个关键帧对应的状态)

animation-duration

规定完成动画效果需要多少秒或毫秒。默认值:0

animation-delay

指定动画效果延迟多久开始。默认值:0

animation-timing-function

规定速度效果的速度曲线。默认值:ease
具体有以下几种值可指定:
linear:动画从头到尾速度相同
ease:动画以低速开始,然后加快,在结束前变慢
ease-in:动画以低速开始
ease-out:动画以低速结束
ease-in-out:动画以低速开始和结束
cubic-bezier(n,n,n,n):根据三次贝塞尔函数,生成速度曲线

step(n[, start|end])
n表示每两个关键帧之间变化多少次,例如:

1
2
3
4
5
@-webkit-keyframes test {
0% {background: red}
50% {background: yellow}
100% {background: blue}
}

若 n=5 则表示0-50%之间变换了5次,50-100%之间也变换了5次。

start|end暂时没看懂。。。

animation-iteration-count

该参数指定了动画的播放次数,有两种参数可选。

  • number: (大于0的整数,默认为1)
  • infinite: 无线次数

animation-direction

该参数指定了动画的播放方向,有两个参数可选。

  • normal: 正常播放(默认)
  • alternate: 轮流反向播放

animation-play-state

该参数指定了动画的播放状态,有两个参数可选,即播放or暂停。

  • running: 播放(默认)
  • paused: 暂停

aniamtion-fill-mode

参考资料:[https://www.cnblogs.com/lyzg/p/5738860.html]

animation-fill-mode是css3动画的一个属性,它能够控制元素在动画执行前与动画完成后的样式。一个带有延迟,并且按正常方向执行的动画(正常方向是指从0%运行到100%),执行一次的过程可以描述如下:
animation动画
按照动画的执行时间来划分,一次动画过程可以将元素划分为3个状态:动画等待,动画进行和动画结束状态。默认情况下,只有在动画进行状态,才会应用动画的keyframes所定义的样式;而在动画等待和动画结束状态,不会对元素的样式产生影响。animation-fill-mode有四个值,分别是:

none:默认值,正是这个值,不会对动画等待和动画完成的元素样式产生改变;

backwards:动画等待的那段时间内,元素的样式将设置为动画第一帧的样式;

forwards:在动画结束后,元素的样式将设置为动画的最后一帧的样式;

both:相当于同时配置了backwards和forwards,意味着在动画等待和动画结束状态,元素将分别应用动画第一帧和最后一帧的样式。

返回顶部