CSS动画

前言

总体上来说,animation的效果比transition的效果更加丰富和可控;有一些动画属性实际上是和渐变里面的效果是一致的;

animation属性

transition一样,animation属性也是一个缩写属性,实际上是由多个动画属性组成的:

动画属性 作用 取值
animation-name 动画的名称,用@keyframes进行声明 <string>
animation-duration 动画的周期
单位为sms,整数部分为0时可以不写
<time>
animation-delay 动画的延迟,可以为负值
负值可以使得动画在一开始就处于某一个中间状态
<time>
animation-timing-function 动画的缓动函数 <timing-function>
animation-iteration-count 动画运行次数,默认为1 <number>
<time>
infinite:一直播放
animation-direction 动画运行方向
从起点到终点状态的方向
normal:每个周期结束后重置为初始状态默认值
reverse:每个周期都从结束状态开始,开始状态结束;周期结束后重置为结束状态缓动函数也相应反转;
alternate:往返运动;即每次周期结束后反转一次运动方向,第一次方向为normal
alternate-reverse:同alternate类似,只是第一次方向为reverse
animation-fill-mode 动画执行开始前和执行结束后的样式表现 none:开始前和结束后不会应用动画里面的样式,默认值
forwards:动画执行结束后会保持最后一帧的样式;要注意这里指的最后一帧并不一定是动画定义的最后一帧,因为animation-direction可以改变动画运行的方向!
backwards:同理,动画执行前会保持第一帧的样式;
bothforwards + backwards
animation-play-state 动画的运行状态
可以控制动画的暂停和运行
running:正在运行;
paused:暂停运行;

@keyframes

@keyframes可以声明一个动画,该动画由多个关键帧组成,每个关键帧下是当前帧动画所表现的样式(这里的样式只能使用支持动画效果的属性);声明格式如下:

1
2
3
4
5
6
7
8
9
@keyframes animationName {
frame1 {
/* 当前帧样式 */
}
/* ... */
frameN {
/* 当前帧样式 */
}
}

关键帧的名称是一个时间进度值,取值如下:

  • from:相当于0%;动画周期的开始;
  • to:相当于100%;动画周期的结束;
  • %:百分比,百分比相对于一个动画周期的时间;

因此,动画实际上就是根据缓动函数以及关键帧的样式来进行插值(补帧),得到每一帧的样式。

animation事件

事件名称 触发时机
animationstart 动画开始执行的时候
animationend 动画执行结束的时候
animationiteration 动画每个周期(除了第一次)开始的时候

扩展

Web Animations API

Web Animations API是专门用来控制DOManimation效果的一套API,通过这套API
可以直接使用js动态来设置动画效果;不过目前这套API的兼容性比较差,只有element.animate()方法还能用用;

20200130133645

参考文档

  1. Using CSS animations - CSS: Cascading Style Sheets | MDN
  2. Web Animations API - Web APIs | MDN