最近做项目越来越追求美了，难道做前端都会慢慢变得有艺术。反正看着静态页面连做下去的欲望都没有了

css3两种动画

1.transition动画

transition动画用起来简单顺手，感觉很轻量

1
2
3
4
5
6
7
8
9
10
li.radio{
    -webkit-transform: perspective(300px) scale(0.9) rotateX(-20deg) translateZ(-40px);
    opacity: 0;
   // -webkit-transition: all 0.5s linear 0s;
   	-webkit-transition: -webkit-transform 0.5s linear 0s, opacity 0.5s linear 0s
}
li.radio.on{
    -webkit-transform: perspective(0px) scale(1) rotateX(0deg) translateZ(0px);
    opacity: 1;
}

transition动画在css属性变化时激发，一般常用就是绑定一个新的class名，通过js动态添加和去掉类名（.on）实现动画。书写方式就不解释了，重点关注下第三个参数时间函数，使用这个贝塞尔曲线函数cubic-bezier(n,n,n,n)变化很多，可以找个在线网站去动态创建自己想要的事件函数

2.@key-frames动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.car-run .car-suite{
    width: 100px;
    height: 150px;
    position: absolute;
    bottom: 6px;
    -webkit-animation: car-shake 0.5s infinite;
}
@-webkit-keyframes car-shake {
    0{
        -webkit-transform: scale(0.97,1.03);
    }
    50%{
        -webkit-transform: scale(1,1);
    }
    100%{
        -webkit-transform: scale(0.97,1.03);
    }
}

key-frames动画更加强大，激发条件也很简单。当该属性出现时就开始了动画，当然可是可以设置延迟的。它的属性更多，无疑可以进行更为精确的控制，比如，可以设置动画执行的次数，可以具体控制属性的变化

###总结
小动画，一次之后不会再次运行用transition；复杂细致控制，多次执行用animation

css3 3d动画

要使得图像看起来立体，我们首先了解x,y,z轴
在css中，z轴是指向观察者的，可以想象面前一条横线是x轴，竖线为y轴；这样就很容易理解rotateX,rotateY,rotateZ和translateX,translateY,translateZ

还要了解perspective和perspective-origin属性，这是创造3d视图的关键。perspective调整元素距离视图的距离。
有两种设置方式：

1
2
3
4
5
6
7
.stage {	//写在舞台元素（一般是父元素）
    perspective: 600px;
}
#stage .box {	//写在自己身上
    transform: perspective(600px) rotateY(45deg);
}

当动画元素（即box）只有一个时，效果是一样的。为什么我们没有perspective时没有3d效果，可以这样理解：现在眼睛或者说舞台父元素与动画元素距离为0，贴的太近看不出效果；当视线逐渐变远，就可以看到3d效果了。当变得很远，又会看不到效果了，而translateZ也就是可以改变元素这个方向上距离的属性。

当动画元素有多个时，效果就不一样了。第一个在父元素中设置perspective，相当于只有一个视角，这是看到多个相同的动画元素的倾斜角是不同的。但如果直接在元素本身这是perspective，则会发现多个元素的倾斜角依然相同，因为这相当于创建了多个视角

详细请看大神博客css3d动画