1、transition： 过渡
transition ：过渡效果的 CSS 属性的名称 完成过渡效果需要多少秒或毫秒，动画执行的速度，动画延迟开始时间
CSS 属性有：all、no、 width、height
速度与效果：
linear：线性运动，开始与结束速度相同。
ease：平滑运行。
ease-in：逐渐加速。
ease-out：逐渐减速。
ease-in-out：先快后慢。
写法：transition :all 2s linear 2s
transfrom属性：
translate(元素平移):translate(50px,40px)水平50垂直40 translateX(50px)水平移动50 translateY(40px)垂直移动40
scale()放大与缩放：scale(2)宽高放大2倍，scale(2,4)宽2高4，小数为缩小
rotate()旋转：rotate(30deg)元素旋转30度，rotateX(30deg)沿X轴旋转30度，rotateY(30deg)垂直旋转30度
tranfrom-origin:50% 50%; 以元素中心为基点旋转（默认）
skew()倾斜：skew(30deg,20deg)把元素沿水平方向倾斜30度，垂直20度
skewX()沿水平方向倾斜，skewY()沿垂直方向倾斜
每一个元素只能有一个transfrom属性，设置多个空格隔开即可 transform:translateX(50px) rotateX(30deg)
2、animation： 动画
通过@keyframes 规则，创建动画。 在动画过程中，您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。
@keyframes 动画名
{
0% {top:0px;}
50% {top:100px;}
100% {top:0px;}
}
调用动画：
animation-name():动画名，
animation-duration():动画持续时间，
animation-timing-function:动画执行速度。
linear：线性运动，开始与结束速度相同。
ease：平滑运行。
ease-in：逐渐加速。
ease-out：逐渐减速。
ease-in-out：先快后慢。
animation-delay:动画延迟时间
animation-iteraton-count:动画执行次数，数字或infinite（无限循环）
animation-direction: 是否循环交替反向播放动画
normal 正常播放
alternate 奇数次正向播放，偶数次反向
alternate-reverse 奇数次正反向播放，偶数次正向
reverse 反向播放
animation-fill-mode 动画填充模式 forwards 动画结束后停在结束位置 backwards 结束后到开始位置
animation-play-state 动画是否暂停
running 继续
paused 暂停
例：
不想写可以用 https://animate.style/ animate动画网