css动画

这篇是css动画的笔记。我发现自己总是记不住东西，即使用过了一次，记录在这里省的每次都去mdn搜

animation

animation-delay

延时，即从元素加载完成之后到动画序列开始执行的这段时间。

animation-direction

动画的重复形式。

1.normal默认

每个动画循环结束，动画重置到起点重新开始。

2.alternate

动画交替反向运行，反向运行时，动画按步后退，同是，带时间功能的函数也反向，比如，ease-in在反向时成为ease-out。

3.reverse

反向运动动画，每周期结束动画由尾到头运行

4.alternate-reverse

反向交替，反向开始交替

animation-duration

动画一周期的时长。

animation-iteration-count

动画重复的次数，默认值为1。

1.infinte

无限循环播放动画

2.动画播放的次数不可为负值，可以用小数定义循环（0.5将播放动画到关键帧的一半（from 0~50%））

animation-nam  

指定由@keyframes描述的关键帧名称。

animation-play-state

一个动画是否运行或者暂停。可以通过查询它来确定动画的运行状态。另外，它的值可以被设置为暂停和恢复的动画重放。

1.running

当前动画正在运行

2.paused

当前动画以被停止

animation-timing-function

设置动画速度，即通过建立加速度曲线，设置动画在关键帧之间是如何变化

可能值为一个或者多个。

animation-fill-mode

指定动画执行前后目标元素应用样式

1.none

动画执行前后不改变任何样式

2.forwards

动画最后一帧的样式

3.backwards

动画第一帧的样式

关键帧

@keyframes指定动画中特定时间点必须展现的关键帧样式

语法

@keyframes name {
from {
transform: rotate(0);
}
to{
transform: rotate(180deg);
}
}

@keyframes name {
0% {
transform: rotate(0);
}
50%{
transform: rotate(180deg);
}
100%{
transform: rotate(0);
}
}