变换transform
transform: rotate | scale | skew（扭曲） | translate（移动）;
属性之间用空格隔开 注意：不是逗号“，”
一、移动translate
1、translate(<translation-value>[, <translation-value>])
2、translateX(<translation-value>)
3、translateY(<translation-value>)
例如
二、旋转rotate
rotate(<angle>)
Transform:rotate(45deg);
Transform:rotateX(45deg);
Transform:rotateY(45deg);
Transform:rotateZ(45deg);
Perspective（透视加给父元素有3D效果）:500;设置元素被查看位置的视图
改变元素基点transform-origin
transform-origin:X Y
(1) transform-origin:left top:
(2) transform-origin:right
(3) transform-origin:25% 75%;
三、缩放scale
1、scale(<number>[, <number>])
2、scaleX(<number>)
3、scaleY(<number>)
四、扭曲skew
1、skew(<angle> [, <angle>])
2、skewX(<angle>)
3、skewY(<angle>)
动画animation
animation
Keyframes “关键帧”加浏览器前缀加在@后
@keyframes 动画的名称{
From（开始）{}
To（结束）{}
}
例如：
@keyframes IDENT {
0% {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
100% {
Properties:Properties value;
}
}
一、animation-name: 动画名称
animation-name: none | IDENT
IDENT是由Keyframes创建的动画名，可以同时附几个animation给一个元素，我们只需要用逗号“，”隔开
二、animation-duration 动画持续时间
取值:<time>为数值，单位为s （秒.）其默认值为“0”
三、animation-timing-function: 动画速度
animation-timing-function:ease | linear（匀速） | ease-in | ease-out | ease-in-out（先加速后减速） | cubic-bezier(<number>, <number>, <number>, <number>) | steps(){阶跃式运动}
四、animation-delay: 动画延迟时间
取值为<time>为数值，单位为s(秒)，其默认值也是0。
五、animation-iteration-count 动画次数 默认运动一次 可以填写数字定义循环次数
animation-iteration-count:infinite（无限次运动） | <number>
六、animation-direction 动画运动方向
animation-direction: normal | alternate（从开始到结束后再从结束到开始） | reverse（反向运动）
七、animation-fill-mode 动画填充模式
规定动画在播放之前或之后，其动画效果是否可见。
animation-fill-mode : none | forwards | backwards | both;
none 不改变默认行为。
both 向前和向后填充模式都被应用。
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值 （在第一个关键帧中定义）。
