css3中animation动画和2d、3d的使用方法
css3的动画效果很炫,感觉很简单但每次使用的时候都得查哪个属性怎么用等，物流是里面的一些动画、2d、3d也是分不清楚，下面记录下使用步骤
css3的动画有两种一种是过渡动画，一种是帧动画，听起来就大概知道是什么情况啦帧动画肯定是更牛X一点
过渡动画
过渡动画主要设置下面几个属性,指定元素的哪个属性怎么过滤效果,
transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。
transition-timing-function 规定过渡效果的时间曲线。
transition-delay 规定过渡效果何时开始。
我一般直接用下面代码让元素的所有属性都使用过渡效果
a{
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}然后就是等一个什么事件改变这个元素的属性,比如宽高颜色等，就可以看到效果啦，就像上面a标签最多的就是hover事件
a:hover{
color:#f000;
}加上上面代码后，你放a标签上就是有颜色渐变的效果，宽高也是一样的有过渡效果，
如果想控制动画的过程的话就得使用帧动画来做啦，看下面
帧动画
使用动画的步骤为先定义动画效果然后哪个元素需要这个动画的话直接使用animation:name把对应的动画指定给对应的元素就可以啦，如下实现一个简单的元素从上面淡入的动画效果(不考虑兼容性啦)
@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px)
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
}一个div使用这个动画的时候加入上面类就可以啦如下
.fadeInDown{
webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
animation-iteration-count: 1;
}动画效果设置
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
animation-delay 规定在动画开始之前的延迟。 n s秒
animation-iteration-count 规定动画应该播放的次数。n次或infinite循环
animation-direction 规定是否应该轮流反向播放动画。normal或alternate 有反向的动画
2d和3d效果
动画已经能动起来啦，想要再炫一点就得想办法在动画里面加入一些css样式来控制显示效果啦，正常情况下如上面所示加一些透明宽高等
2d,3d效果主要使用transform:.... 来使用元素应用这些效果如下
2d类效果
translate(x,y) 向x和y坐标移动像素,可以单独写translateX(x)和translateY(y)
rotate(30deg) 元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。单位 deg
scale(x,y) 元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：进行缩放
skew(30deg,30deg) 元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数 单位deg
matrix()
把元素往上面移动20个像素
transform: translateY(-20px)
更多的属性就不写啦直接去看文档吧
http://www.w3school.com.cn/cssref/index.asp#transform
