CSS3动画
注意：我下面代码如果你是直接拷贝的话图片是不可以用的，要自己改变一下图片的路径
一.过渡
语法：transition：要过渡的属性 花费时间 运动曲线 何时开始；
常见写法：transition:all 2s;其中all表示的是要过渡所有的属性，比如宽高什么的所有的，时间为2秒
如果有多组属性变化，用逗号隔开
下面来讲一下运动曲线有哪些属性值可以选择：
| 运动曲线的属性值名称 | 代表意思 |
|---|---|
| ease（默认值） | 逐渐满下来 |
| linear | 匀速 |
| ease-in | 逐渐加速 |
| ease-out | 逐渐减速 |
| ease-in-out | 先加速后减速 |
看一下代码例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
transition: width 2s ease 0s;/*表示的是过渡的是宽，过渡时间是2s，过渡曲线的变化是逐渐变慢，页面加载完就开始*/
}
div:hover {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
二.2D变型
1.移动translate（x,y)
使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动。
可以改变元素的位置，x、y可为负值；
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x)仅水平方向移动（X轴移动）
translateY(Y)仅垂直方向移动（Y轴移动）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>translate</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
transition: all 0.5s;
}
div:hover {
transform: translate(600px,600px);
/*表示的是在x轴上进行平移600px，在y轴上平移600px*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
translate有一个非常棒的应用，那就是可以将定位盒子居中
如何对定位盒子进行居中：1使用position：absolute;top:0px;left:50%;margin-left:-盒子宽度的一半
2.position：absolute; top:0px; left:50%;translate(-50%,0px) 其优点是不需要计算
2.缩放 scale(x, y)
对元素进行水平或垂直方向的缩放
scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）
看一下代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scale</title>
<style>
.son {
width: 200px;
height: 200px;
background-color: pink;
transition: all 0.6s;
margin: 100px auto;
}
.son:hover {
transform: scale(1.2); /*将现在的盒子进行宽高放大为原来的1.2倍*/
box-shadow: 0px 4px 4px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<div class="son"></div>
</body>
</html>
3.旋转 rotate(deg)
可以对元素进行旋转，正值为顺时针，负值为逆时针；
看一下旋转扑克牌的效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rotate</title>
<style>
div {
width: 150px;
height: 100px;
position: relative;
margin: 300px auto;
}
div img{
width: 150px;
height: 100px;
position: absolute;
transition: all 3s;
transform-origin: right top;/*这里是调整元素转换变形的原点*/
}
div:hover img:nth-child(1) {
transform: rotate(60deg);
}
div:hover img:nth-child(2) {
transform: rotate(120deg);
}
div:hover img:nth-child(3) {
transform: rotate(180deg);
}
div:hover img:nth-child(4) {
transform: rotate(240deg);
}
div:hover img:nth-child(5) {
transform: rotate(300deg);
}
div:hover img:nth-child(6) {
transform: rotate(360deg);
}
</style>
</head>
<body>
<div>
<img src="../images/1.jpg" alt="">
<img src="../images/1.jpg" alt="">
<img src="../images/1.jpg" alt="">
<img src="../images/1.jpg" alt="">
<img src="../images/1.jpg" alt="">
<img src="../images/1.jpg" alt="">
</div>
</body>
</html>
transform-origin可以调整元素转换变形的原点
如果是4个角，用left,top，这些值，如果想要精确的位置，就用像素值
4.skew(deg,deg)
语法：transform:skew(30deg,0deg);
三.3D变型
3D就是相当于我们高中数学里面的x轴，y轴，z轴
1.routerX 就是沿着 x 立体旋转.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rotateX</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 200px auto;
}
div:hover {
transform: rotateX(40deg); /*40deg可以在浏览器中自己调可以看到更清楚*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
routerY 就是沿着 Y立体旋转.
routerZ 就是沿着 Z立体旋转.
2.透视(perspective)
注：并非任何情况下需要透视效果，根据开发需要进行设置。
perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素
3.translateX(x), translateY(y),translateZ(z)
translateX(x): 仅水平方向移动（X轴移动）
translateY(y): 仅垂直方向移动（Y轴移动）
translateZ(z): 前后移动，直观的表现就是大小变化
当然要是你想让3个值写在一起也是可以的
translate3d(x,y,z)
其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值
三.动画(CSS3) animation
语法格式：animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
animation: go 2s ease 0s 3 normal;
}
@keyframes go {
from {/*开始*/
transform: translateX(600px);
}
to {/*结束*/
transform: translateX(0px);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>