主要分为三个属性

1.transition 实现渐变动画，这种方式允许元素在状态改变时平滑地过渡。它一共有四个值

transition: [] [] [] [];

---1.需要过渡的CSS属性名，可以是单个属性或多个属性，用逗号分隔。例如，width、height、background-color等。如果你想为所有可过渡属性设置过渡效果，可以使用all。

---2.指定过渡效果的持续时间，以秒（s）或毫秒（ms）为单位。例如，2s表示2秒

---3.定义过渡效果的时间曲线，控制过渡的速度。例如，ease表示开始和结束慢，中间快；linear表示速度始终保持一致；ease-in表示开始慢，然后变快；ease-out表示开始快，然后变慢；ease-in-out表示开始和结束都慢，中间部分快。

---4.指定过渡效果开始前的延迟时间，以秒（s）或毫秒（ms）为单位。例如，1s表示延迟1秒后开始过渡效果。

2.Transform实现转变动画：旋转、缩放、倾斜和移动等操作。

rotate(旋转)缩放（scale）、倾斜（skew）、移动（translation）

1.---rotate旋转的角度可以是正数（顺时针旋转）或负数（逆时针旋转）。

2.---scale例：要将一个元素的宽度和高度都缩小到原来的一半。

.element {
transform: scale(0.5, 2); /* 宽度缩小到一半，高度放大到两倍 */
}

3.---Skew函数用于在X轴或Y轴上倾斜元素。

X轴负数为向左倾斜正数为向右倾斜 Y轴负数为向上倾斜正数为向下倾斜

4.---translation

transform: translate(50px, 100px); /* 向右移动50像素，向下移动100像素 /
transform: translate(-50px, -100px); / 向左移动50像素，向上移动100像素 */

@keyframes example {

0% {background-color: red;} /* 动画开始时 */

25% {background-color: yellow;} /* 动画25%时 */

50% {background-color: blue;} /* 动画50%时 */

100% {background-color: green;} /* 动画结束时 */

}

animation-duration: 4s; /* 动画完成一个周期所需的时间 /
animation-delay: 2s; / 动画开始前的延迟时间 /
animation-iteration-count: infinite; / 动画播放的次数，infinite表示无限次 */

div {
width: 100px;
height: 100px;
animation: example 4s 2s infinite; /* 动画名称、持续时间、延迟、迭代次数 */
}

---你还可以控制动画的速度曲线

animation-timing-function: ease-in-out;

---动画的方向

animation-direction: alternate;

---动画的播放状态

animation-play-state: paused; /* 暂停动画 */

animation-play-state: running; /* 播放动画 */