CSS 动画属性

1. 定义动画

@keyframes {}

• 在里面使用时间点编写动画描述。

• 时间点可以用 from、to、百分比数。

• from 相当于 0%，to 相当于 100%。

• 可以分组来写，用 , 分隔。

@keyframes stretching {
  0%, 50% {
    width: 100px;
  }
  100% {
    width: 200px;
  }
}

2. 变换方式

在 @keyframes 关键帧内部编写的是 被赋予了动画的元素如何变换，这个变换支持：

• 基础 CSS 属性

• transform 定义的图形变换

transform 支持的变换

关键字	解释	示例
rotate	二维旋转	rotate(360deg)
translate	二维移动	translate(50px, 100px;)
scale	长度和宽度缩放	scale(2, 2)
skew	沿X轴和Y轴斜切元素	skew(20deg, 10deg)
matrix	矩阵变换
perspective	3D变换透视	transform: perspective(value) rotateY(angle)

translate 可以拆分成 translateX()、translateY()、translateZ()。

scale 可以拆分成 scaleX()、scaleY()、scaleZ()。

4. 分配动画

给元素添加动画名。

animation-name: move;

可以给同一个元素添加多个动画，动画名用逗号分隔。

animation-name: move, stretch;

还可以指定播放时间，也支持同时指定多个。

animation-duration: 5s, 5s;

5. CSS 动画属性

属性名	解释	值	举例	默认值
animation-name	动画名	定义好的 @keyframes 名	fly
animation-duration	动画播放时间	秒或毫秒的字符串	1s, 200ms
animation-iteration-count	播放次数	整数或无限次infinite	2 infinite	1
animation-direction	动画方向	normal 正常 reverse 倒放 alternate 奇偶次正反交替	reverse	normal
animation-delay	动画延迟播放时间	秒或毫秒的字符串	1s, 200ms
animation-fill-mode	动画播放前后状态	forwards 结束后保持状态 backwards 播放前保持状态 both 兼顾二者	backwards
animation-play-state	播放状态	running 正在播放 paused 暂停播放	paused	running
animation-timing-function	动画时间曲线	三次贝塞尔曲线别名： ease linear ease-in ease-out ease-in-out 三次贝塞尔曲线函数：cubic-bezier(0, 0, 1, 1) 步进值：steps(5, start)	ease-in cubic-bezier(0, 0, 1, 1) steps(5, start)	ease