2023-07-16~07-22第二周暑假生活

本周平均学习时间为3小时每天，大部分时间在学习CSS

css通过伪类伪元素动画效果可以实现许多有趣的动画；

动画元素为animotion;

在css中一般这样定义：

animation:name attribute1 attribute2 ...；/*attribute可以省略*/
@keyframes name{/*具体实现*/
0%{
/*动画时间进行到0%的效果*/
}

100%{
/*动画时间进行到100%时的效果*/
}
}

animation有这样一些属性：

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

animation-direction：设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。

animation-duration：设置动画一个周期的时长。

animation-iteration-count：设置动画重复次数，可以指定 infinite 无限次重复动画

animation-name：指定由@keyframes描述的关键帧名称。

animation-play-state：允许暂停和恢复动画。

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

animation-fill-mode：指定动画执行前后如何为目标元素应用样式。