08-2Dcss动画
一、形变transform相关
1.1.平移–translate
translate(x)或translate(x,y)表示向左和向下平移，值可以为百分比（相对与自身长宽）例如:
div{width: 100px;height: 100px;background-color: #63a35c;transform: translate(10px, 20px);}
也可以使用translateX()、translateY()设置平移方向
也可以利用translate做居中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="../reset.css"><style>.div1{width: 300px;height: 300px;background-color: #DD4A68;}.div2{position: relative;width: 100px;height: 100px;top: 50%;//父元素的高background-color: #63a35c;transform: translateY(-50%);//该元素的高}</style>
</head>
<body><div class="div1"><div class="div2"></div></div>
</body>
</html>
不推荐写translate:x y;因为浏览器兼容性的问题
1.2.缩放–scale
scale(x,y)表示向x，y方向缩放多少，例如：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="../reset.css"><style>.div1{display: inline-block;width: 300px;height: 300px;border: 3px solid red;}.div2{width: 300px;height: 300px;transform: scale(0.6,120%);background-color: chartreuse;}</style>
</head>
<body><div class="div1"><div class="div2"></div></div></body>
</html>
或者scale(x/y)，里面只有一个值时，同时缩放x,y方向
1.3.旋转–rotate
rotate(angle)表示旋转的角度（默认按几何中心为原点），正数为顺时针旋转，负数为逆时针旋转，示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="../reset.css"><style>.div1{display: inline-block;width: 300px;height: 300px;border: 3px solid red;}.div2{width: 100px;height: 100px;transform: rotate(30deg);background-color: chartreuse;}</style>
</head>
<body><div class="div1"><div class="div2"></div></div></body>
</html>
- rotate(angle)是rotateZ(angle)的缩写
- rotate的单位：
- deg(degrees)：度
- grad(gradians)：百分度（一圈分为400份）
- rad(radians)：弧度
- turn(turns)：圈数
1.4.倾斜–skew（了解）
skew(x)或skew(x,y)表示向左和向下倾斜，单位与rotate的相同，示例：
transform: skew(20deg, 60deg);
1.5.原点位置–transform-origin
css属性transform-origin:x y的默认值是center center，即几何中心，可以修改属性值控制原点位置，示例：
transform-origin: top left;
1.6.transform设置多个值
如果是多行写，就只能生效最后一行：
transform-origin: top left;
transform: rotate(30deg);
transform: translate(300px);
如果把属性值写在一起，就能同时生效：
transform-origin: top left;
transform: translate(50px) rotate(10deg);
二、动画
2.1.transition简单动画
2.1.1.添加到动画的属性–transition-property
这个属性的值为需要进行动画演示的css属性，值为all时是全部属性，例如：
transform: translate(50px) ;
transition-property: transform;
2.1.2.动画的持续时间–transition-duration
这个属性的值为动画的持续时间，例如：
transition-duration: 0.5s;
2.1.3.动画的演示快慢方式–transition-timing-function
这个属性的值为动画的演示快慢方式，例如：
transition-timing-function: ease;
2.1.4.动画的延迟时间–transition-delay
这个属性的值为动画演示等待的时间，例如：
transition-delay: 1s;
2.1.5.transition设置多个值
transition的多各种值可以写在同一行，为
transition：property duration timing-function delay
示例：
transition: all 0.5s ease 1s;
2.2.animation帧动画
2.2.1.@keyframes
0%（也可以写为from）为最初状态，100%（也可以写为to）为最终状态，可以在不同状态添加动画，示例：
@keyframes mv {0%{transform: translate(0,0) ;}33%{transform: translate(100px,50px) scale(1.5);}100%{transform: translate(120px,30px) ;}
}
2.2.2.animation的各个属性
animation的属性和transition类似
animation-name为要执行的动画的名称，这里使用2.2.1.的@keyframes动画mv
animation-name: mv;
animation-duration为动画的持续时间
animation-duration: 1s;
animation-timing-function为动画的演示快慢方式
animation-timing-function: ease-in-out;
animation-delay为动画的延迟时间
animation-delay: 0.5s;
animation-iteration-count为动画执行的次数
animation-iteration-count: 2;
animation-direction为动画播放方向，这里的reverse是倒放
animation-direction: reverse;
animation-fill-mode为动画播放完后的位置，默认是返回原位置，这里的forwards是动画最后一帧的位置，backwards为第一帧位置
animation-fill-mode: forwards;
animation-play-state控制动画的播放与暂停，一般用js控制
animation-play-state: paused;
2.2.3.animation设置多个值
这里的多个值顺序为：
这里写一个animation动画示例：
.div2{width: 100px;height: 100px;background-color: chartreuse;animation: mv 1s ease-in-out 0.5s 2 forwards;}
@keyframes mv {0%{transform: translate(0,0) ;}33%{transform: translate(100px,50px) scale(1.5);}100%{transform: translate(120px,30px) ;}}
