- 在css2中所有的属性都是即时效果
- 在css3中增加了动画效果
1.transition属性：
语法：当css属性值发生改变时，由起始值向结束值实现平滑过渡效果。
特点：1)只有两种状态，一个是起始值，一个是结束值
2)动画的执行是需要被触发的，可以通过伪类、js、媒体查询等的触发动画执行的。（css属性值发生改变时，transition属性才会被触发）
transition-property:过渡属性(默认值all)
transition-duration 动画执行的时间
transition-timing-function 动画运行的速度 [ease(默认值，减速) ease-in(加速) ease-out(减速) linear(匀速) ease-in-out(先加速后减速) ](ease)
transition-delay 延迟时间(0s)
简写写法：transition: property duration timing-function delay
如果只有属性不一样，后面的执行时间，运行速度，延迟时间都一样
transition:all 1s linear 1s.all可以省略
transition:1s .1s的执行时间，其他都是默认值。
-----------------------------------------------------------------------
2.transform属性 2D变形效果
rotate(45deg) 旋转 正->顺时针旋转 负->逆时针旋转
skew(x,y)倾斜 x正->水平向左，x负->水平向右. y正->垂直向下，y负->垂直向上
scale(x,y)缩放
translate(x,y) 平移 水平方向正->右，负->左。垂直方向正->下，负->上
变形的基准点：默认是中心点
transform-origin:可以改变变形的基准点left/top/right/bottom|10px 10px。rotate/skew/scale可以改变，translate不能改变
四个变形方法结合在一起写，如果translate写在第一个位置上会改变其他变形方法的基准点
-----------------------------------------------------------------------
3.animation帧动画
弥补了过渡动画的缺陷，例如：可以设置任意状态，不需要触发条件立马执行
帧动画分为两步：
1)通过keyframes 动画名 设置动画的运动曲线
2)通过animation调用声明的关键帧
@keyframes move{
0%{ 百分比可以理解成在一定时间内，设置某个时间点的样式
transform:translate(100px)
}
25%{
transform:translate(50px)
}
100%{
transform:translate(300px)
}
}
animation细分属性
animation-name 关键帧动画名称(必写)
animation-duration 动画运行的时间(必写)
animation-timing-function 动画运行的速度 默认ease
animation-delay 延迟时间
animation-iteration-count 执行的次数 1|infinite(无限循环次) 建议写上，有的手机上不写不出效果
animation-direction 执行的方向 normal(默认)|反方向reverse|交替运行alternate|反方向的交替运行reverse-alternate
animation-play-state 动画的状态 running是默认值，当是默认值的时候不用写|paused停止
animation-fill-mode 动画结束后的状态 none(默认)|backwards(起始状态)|forwards(最后一帧的状态)|both(根据方向的设置，可能是第一帧的状态或者最后一帧的状态)。both的话会回到第一帧的位置。加上延迟时间才可以看出来
animation简写写法：
animation:move 1s linear 1s 1 reverse both
animation:move 1s 1 both;有默认值的则不用再设置相同的值了
--------------------------------------------------------------------
3D变换
transform-style:flat|preserve-3d(3D空间展示)作用在变形元素的父标签
perspective:2000px 景深(800px-2000px)近大远小的效果 设置在祖先标签上(包含父标签).用户到z轴平面的距离
transform:perspective(800px) 直接作用在变形元素上.
perspective-origin:center默认值是center
rotateX围着x轴翻转 前后翻 正->前翻 负->后翻 rotate3d(1,0,0,45deg)
rotateY围着y轴翻转 rotate3d(0,1,0,45deg)
rotateZ() 效果和rotate()一样的，但是是在Z由上旋转 rotate3d(0,0,1,45deg)
scale3d(x,y,z)
scaleZ单独使用不起作用，必须配合其他变形方法一起使用
