CSS动画
一、过渡动画
只可以设置开始结束动画，且需要触发机制，只能触发一次。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单</title><style>.box{width: 200px;height: 200px;background: red;transform: rotate(0);}.box:hover{transition-property: width; //过渡的属性transition-duration: 1s; //过渡的时间transition-timing-function: linear; //过渡的状态width: 400px; background: pink;}</style>
</head><body><div class="box"></div>
</body></html>
1.rotate()
可以是负值，属性值为负数那么向反方向旋转。
transform-origin: top left; //基点
transform: rotate(90deg); //旋转的角度
2.scale()
transform: scale(0.5,1); //
3.skew()
可以是负值，属性值为负数那么向反方向旋转。
transform: skew(30deg);
4.transfrom()
可以是负值，属性值为负数那么向反方向移动。
transform: translateX(100px);transform: translateY(100px);transform: translateZ(100px);
5.复合属性
/* transition: property duration timing-function */transition:width 2s linear;
二、关键帧动画
可以设置其任何状态的动画，不需要触发机制，自执行动画。
@keyframes run {0%{}25%{background: yellow;}50%{background: blue;}100%{background: orange;}
}
1.属性：
animation-name: run; //动画的名称
animation-delay: 2s; //延迟执行的时间
animation-duration: 3s; //动画执行的时间
animation-fill-mode: forwards; //执行结束的状态（参数：forwards、backwards）
animation-iteration-count: infinite; //动画执行的次数
2.综合属性
animation: name duration timing-function delay iteration-count direction fill-mode;