这是我参与「第四届青训营」笔记创作活动的第2天

动画

keyframes（关键帧）：

@keyframes 动画的名称 {
	from {
		transform: translateY(20px);
	}
	to {
		transform: translateY(0px);
	}
}
//from，to等效于0%与%100，分别代表动画的开始与结束，中间可以添加任意的尺寸

###动画属性

1.animation-duration（表示动画持续时间）

.my-element {
	animation-duration: 10s;  //表示动画持续了十秒
}

2.animation-timing-function（表示动画效果）

.my-element {
	animation-timing-function: ease-in-out;//可选参数有linear，ease，ease-out，ease-in，ease-in-out
}

**贝塞尔三次曲线：一条以时间为横坐标，以进度为纵坐标的和速度相关的曲线，它表示了过渡/动画中间状态的变化快慢。该曲线用于对速度建模。每个计时功能关键字，如 ease，参考预定义的贝塞尔曲线。在 CSS 中，您可以直接定义贝塞尔曲线，使用 cubic-bezier()函数，它接受四个数值： x1, y1, x2, y2.

.my-element {
	animation-timing-function: cubic-bezier(.42, 0, .58, 1);//数值模拟可以到收藏的网站上查看
}

**step函数：相对于前者更加卡顿的动画，相当于一帧一帧肉眼可见的实现

.my-element {
	animation-timing-function: steps(10, end);//10帧，默认是end
}

3.animation-iteration-count（动画的执行次数，默认为1）

.my-element {
	animation-iteration-count: 10;  //表示动画执行10次后停止，可选参数有infinity，相应的数字（不能是负数）
}

4.animation-direction（动画的执行顺序，不重要）

normal：默认值，即forwards。
reverse: 在你的时间线上倒退。
alternate：对于每个动画迭代，时间线将按顺序向前或向后运行。
alternate-reverse: 反面 alternate.

5.animation-delay（距离开始执行动画所需要的时间）

.my-element {
	animation-delay: 5s;//可以是负值
}

6.animation-play-state（播放动画的状态）

.my-element:hover {
	animation-play-state: paused;//表示暂停动画
}

7.animation-fill-mode（动画关键帧在动画结束或开始的状态）

forwards：根据动画方向，最后一个关键帧将持续存在。
backwards：第一个关键帧将根据动画方向持续存在。
both: 遵守两者的规则 forwards和 backwards.

简写方式：

过渡（transition）：

1.过渡属性（transition-property）：

.my-element {
  transition-property: background-color;//表示转换的属性，可以用all来表示所有的属性
}

2.过渡持续时间（transition-duration）：

以秒为单位，表示过渡所用的时间

3.过渡定时属性（transition-timing-function）：

和动画属性类似，有linear，ease-in，ease-out等属性

4.转换延迟（transition-delay）

指定转换推迟的时间，应用比如交错出现的滑块

速记：

.shorthand {
  transition: transform 300ms ease-in-out 0s; //顺序必须一样，可以省略
}

过渡和转换属性会启用GPU加速，降低性能

转换（transform）：

2D转换

1.translateX、translateY（tx，ty）

接收两个属性，分别表示像水平轴和垂直轴正方向移动的距离

2.rotate（xx deg）

表示图像绕原点旋转的角度，正值表示顺时针，负值表示逆时针

3.scale（数字）

表示元素扩大的倍数，可以传入两个参数分别代表x轴与y轴

4.skew（ax，ay）

表示元素水平倾斜与垂直倾斜的角度

3D转换

1.translate3d()

rotation3d()函数将3D空间中的元素围绕[x，y，z]方向向量为圆点旋转指定角度。 这可以写成rotate(vx，vy，vz，angle)。

2.rotate3d()

该rotate3d()函数围绕[x，y，z]方向向量将3D空间中的元素旋转指定角度。可以写成rotate(vx, vy, vz, angle)

3.scale3d()

scale3d()函数更改元素的大小。可以写成scale(sx, sy, sz)。除非将其与旋转和透视图等其他变换功能结合使用，否则此功能的效果并不明显

其他属性：

transform-origin：表示旋转原点，可以是px也可以是方位

css样式 | 青训营笔记

动画

过渡（transition）：

转换（transform）：

2D转换

3D转换

其他属性：