CSS3动画
构建CSS3动画的主要方式有transform(变形),transition(过渡),animation(动画)三种
在开始之前:先比较一下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 | transform: scaleX(sx); /* a unitless <number>, e.g. scaleX(2.7) */ |
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 | @-webkit-keyframes test { |
若 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
animation-fill-mode是css3动画的一个属性,它能够控制元素在动画执行前与动画完成后的样式。一个带有延迟,并且按正常方向执行的动画(正常方向是指从0%运行到100%),执行一次的过程可以描述如下:
按照动画的执行时间来划分,一次动画过程可以将元素划分为3个状态:动画等待,动画进行和动画结束状态。默认情况下,只有在动画进行状态,才会应用动画的keyframes所定义的样式;而在动画等待和动画结束状态,不会对元素的样式产生影响。animation-fill-mode有四个值,分别是:
none
:默认值,正是这个值,不会对动画等待和动画完成的元素样式产生改变;
backwards
:动画等待的那段时间内,元素的样式将设置为动画第一帧的样式;
forwards
:在动画结束后,元素的样式将设置为动画的最后一帧的样式;
both
:相当于同时配置了backwards和forwards,意味着在动画等待和动画结束状态,元素将分别应用动画第一帧和最后一帧的样式。