/* transform属性允许您修改CSS视觉格式模型的坐标空间 。使用它，元素可以被翻译，旋转，缩放和倾斜 该translate() CSS函数在水平和/或垂直方向上重新定位元素。 translateX(t)代表了向量平移的横坐标长度<length>。 transform: translateX(10px); 等同于 translate(10px) @keyframes fadeIn { } -webkit-animation-name: fadeIn; 动画名称 -webkit-animation-duration: 3s; 动画持续时间 -webkit-animation-iteration-count: 1; 动画次数 -webkit-animation-delay: 0s; 延迟时间 */
ccs3动画效果
1. transition过渡？
transition-property : 规定设置过渡效果的CSS属性的名称。
all ( 默认值 ) , 指定 width , height;
transition-duration : 规定完成过渡效果需要多少秒或毫秒。
需要添加单位：s (秒) ms (毫秒) 1s == 1000ms
transition-delay : 定义过渡效果何时开始。
2s : 延迟两秒进行过渡
-2s : 提前两秒进行过渡
transition-timing-function : 规定速度效果的速度曲线。
运动形式：加速、减速、匀速…
linear
ease（默认值）
ease-in
ease-out
ease-in-out
cubic-bezier
（ http://cubic-bezier.com ）
复合写法：
transition:all 2s linear; √
transition:linear 2s all; √
transition:2s linear all; √
注意：当总时间与延迟时间同时存在的时候，就有顺序了，第一个是总时间，第二个是延迟时间。
transition:2s 3s linear all; √
注意：不要把transition放到hover中
2. transform变形？
translate : 位移
transform:translate(100px,100px); : 两个值 分别对应 x 和 y。
transform:translateX(100px);
transform:translateY(100px);
transform:translateZ(100px); ( 3d )
scale : 缩放
transform:scale(num) num是一个比例值，正常比例是1。
transform:scale(num1 , num2) 两个值 分别对应 w 和 h
transform:scaleX()
transform:scaleY()
transform:scaleZ() ( 3d )
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{ 100px; height: 100px; background:red;
transition-duration : 2s;
transition-timing-function: linear;
}
#box:hover{ 200px; height: 200px; background: blue;}
</style>
</head>
<body>
<div id="box"></div>
<div id="box2"></div>
</body>
</html>
rotate : 旋转
transform:rotate(num) num是旋转的角度 30deg
正值：顺时针旋转
负值：逆时针旋转
表示一个角：角度deg 或 弧度rad
rotateX() ( 3d )
rotateY() ( 3d )
rotateZ()
注 : rotate()跟rotateZ()是等价关系。
skew : 斜切
transform:skew(num1,num2) : num1和num2都是角度，针对的是x 和 y
transform:skewX()
transform:skewY()
注：skew没有3d写法。
注：所有的变形操作，都不会影响到其他元素。(类似于相对定位)
注：变形操作对inline(内联元素)不起作用的。
注：transform可以同时设置多个值。
先执行后面的操作，在执行前面的操作。
位移会受到后面要执行的缩放、旋转和斜切的影响。
3. tranform-origin 基点位置 ?
主要是针对 旋转和缩放，默认都是中心点为基点。
4. animation动画？
原理：逐帧动画。会把整个运动过程，划分成100份。
animation-name : 设置动画的名字 (自定义的)
animation-duration : 动画的持续时间
animation-delay : 动画的延迟时间
animation-iteration-count : 动画的重复次数 ，默认值就是1 ，infinite无限次数
animation-timing-function : 动画的运动形式
ease linear
@keyframes 动画的名字 {
from {}
to {}
}
from : 起点位置 , 等价于 0% to : 终点位置 ，等价于 100%
注：默认情况下，元素运动完毕后，会停到起始位置。
复合样式：
1 . animation
播放之前或之后，其动画效果是否可见。
none (默认值) : 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
backwards : 在延迟的情况下，让0%在延迟前生效
forwards : 在运动结束的之后，停到结束位置
both : backwards和forwards同时生效
animation-direction : 属性定义是否应该轮流反向播放动画。
alternate : 一次正向(0%100%)，一次反向(100%0%)
reverse : 永远都是反向 , 从100%~0%
normal (默认值) : 永远都是正向 , 从0%~100%
2 . animate.css ?
一款强大的预设css3动画库。
官网地址：https://daneden.github.io/animate.css/
基本使用：
animated : 基类(基础的样式，每个动画效果都需要加)
infinite : 动画的无限次数
如果想改变运动的时间：需要在css文件中改变animated这个样式里的时间。
3. 3D效果？
perspective(景深) : 离屏幕多远的距离去观察元素，值越大幅度越小。
3D的眼镜
rotateX
rotateY
translateZ
scaleZ
注：反馈回来的立体，仅限于平面。
transform-style : 3D空间
flat (默认值2d)、preserve-3d (3d，产生一个三维空间)
注：只要是有厚度的立体图形，就必须添加3D控件。
注：在立方体中默认会沿着第一个面进行旋转。
tranform-origin : x y z; (z不能写单词，只能写数字)
perspective-origin : 景深-基点位置，观察元素的角度。
backface-visibility : 背面隐藏
hidden、visible (默认值)
3d写法( 扩展学习 )
scale3d() : 三个值 x y z
translate3d() : 三个值 x y z
rotate3d() : 四个值 0|1(x轴是否添加旋转角度) 0|1(y轴是否添加旋转角度) 0|1(z轴是否添加旋转角度) deg
rotate3d(1,1,1,30deg);
scale translate skew
斜切导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{ margin:0; padding:0;}
ul{ list-style:none;}
#nav{ 415px; overflow: hidden; margin:100px;}
#nav ul{ 440px;}
#nav ul li{ float:left; 100px; height:30px; background:red; color:white;
text-align: center; line-height: 30px; margin-right: 5px;
transform: skew(-30deg , 0);
}
#nav ul span{ transform: skew(30deg , 0); display: block;}
#nav ul li:first-of-type{ margin-left:-10px; padding-left:10px;}
#nav ul li:last-of-type{ padding-right:20px;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><span>首页</span></li>
<li><span>联系我们</span></li>
<li><span>欢迎光临</span></li>
<li><span>先生慢走</span></li>
</ul>
</div>
</body>
</html>
扇子动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{ margin:0; padding:0;}
ul,ol{ list-style: none;}
img{ display: block;}
a{ text-decoration: none; color:#646464;}
h1,h2,h3,h4{ font-size:14px;}
body{ font-size:14px; color:#9f9f9f; font-family: Arial , 微软雅黑;}
.l{ float:left;}
.r{ float:right;}
.clear:after{ content:""; display: block; clear:both;}
ul{ 500px; height:500px; border-bottom: 1px black solid; margin:20px auto; position: relative;}
ul li{ 40px; height:200px; border:1px red solid; position: absolute; bottom:0; left:50%; margin-left:-20px; transition: 1s; transform-origin: center bottom;}
ul:hover li:nth-of-type(1){ transform:rotate(-90deg); background: red;}
ul:hover li:nth-of-type(2){ transform:rotate(90deg); background: red;}
ul:hover li:nth-of-type(3){ transform:rotate(-67.5deg); background: blue;}
ul:hover li:nth-of-type(4){ transform:rotate(67.5deg); background: blue;}
ul:hover li:nth-of-type(5){ transform:rotate(-45deg); background: green;}
ul:hover li:nth-of-type(6){ transform:rotate(45deg); background: green;}
ul:hover li:nth-of-type(7){ transform:rotate(-22.5deg); background: hotpink;}
ul:hover li:nth-of-type(8){ transform:rotate(22.5deg); background: hotpink;}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>