最近在学习制作移动端的页面，做了一个微信页面的小demo，其中用到了很多的CSS3新增的内容，其中就有CSS3新增的变形和动画。其实这种CSS3的动画效果用JS也可以实现，不过CSS3能开启硬件加速，性能更好。
（下面均没写浏览器前缀，如有需要请自行添加~~）
CSS3常见的动画效果的实现，其实主要是靠 transition和 animation 。 而通常，这两个又会和CSS3中的新属性transform 来搭配使用
那么这三个东西其实是干什么用的呢？我按我自己的理解来下个简单结论。
transform：把元素变形；
transition：元素的属性变化时，给他一个过渡的动画效果；
animation：做复杂动画。
下面来详细地说一下。
首先要说的是transform的语法：
|
1
|
transform:none | transform-functions ; |
none是他的默认值，后面的transform-functions指的是变形函数；
变形函数分两种：2D和3D；// 相关语法可以在http://www.w3school.com.cn/cssref/pr_transform.asp查询
其中2D的包括：（变形的以元素中心为基准，即X轴和Y轴的50%处）
translate() //包括translateX() 和 translateY(); 作用：根据XOY坐标来移动元素（X方向右边为正，Y方向下边为正）；
scale() //包括scaleX() 和 scaleY(); 作用：放大或者缩小元素；
rotate() // 作用：旋转元素；
skew() // 包括 skewX() 和 skewY(); 作用：让元素倾斜。
而3D的就多了Z轴，相关语法可以在W3C查到，这里重点推荐张鑫旭大神写的一篇文章 （http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/） ，对于变形的讲解通俗易懂。对于文章里面说到的语法可以搭配后面这个模拟器来配合食用,效果更佳~ (http://fangyexu.com/tool-CSS3Inspector.html )
我来总结几个点：1、进行3D变形时，变形的元素外面要先包两层标签 一个作为舞台，一个作为容器。
|
1
2
3
4
5
|
舞台 容器 元素 元素 ... |
//我个人的理解是,如果舞台上的元素被当做一个整体来看待的话,可以只加一层标签,即把舞台看作容器
|
1
2
3
4
|
舞台(容器) 元素 元素 ... |
2、在舞台的CSS上，设置 perspective （视距），意思就是假设人离舞台的距离。在容器的CSS上设置 transform-style: preserve-3d 来开启3D视图，让容器的子元素在3D空间中呈现。 //如果把舞台当做容器的话,perspective 和 transform-style 就写在一起。
那么，是不是变形的基点只能是元素的中心呢？不是的。 transform-origin属性可以改变变形的基点。
transform-origin的关键字一般的就 top / bottom / left / right / center / top left / top right 之类的啦大家都熟，其中的某些单个关键字其实是简写，例如 top = top center = center top ；
接着就是过渡动画 transition。
触发条件是 :hover / :focus / :active / :checked / JS中的事件
语法： transition: 指定过渡的CSS属性 、 过渡所需时间 、 过渡的函数（动画的速度控制） 、 开始的延迟时间
指定过渡的CSS属性：all / 指定样式 / none （若省略不写，则为 all ，none一般用于清空动画）
过渡所需时间：单位s / ms （默认为0）
过渡的函数： ease（由快到慢 默认值） / linear（匀速） / ease-in（加速） / ease-out（减速） / ease-in-out（先加速后减速）/ cubic-bezier（三次贝塞尔曲线）
具体细微差别可以到 http://www.w3school.com.cn/cssref/pr_transition-timing-function.asp 模拟哦~
延迟时间：单位s / ms （默认为0）
（写transition的时候，先写 动画时间 ， 再写延迟时间）
举个例子吧，博雅今年秋招的笔试题：
用 CSS3 实现一个半径25px的圆 进行速度由快到慢的300px滚动。
|
1
2
|
div{ width:50px; height:50px; border-radius:25px; background:#000; transition:1s ease-out;}div:active{ transform:translateX(300px) rotate(780deg);} |
贼简单吧~ 这里有几个细节，第一个就是 transition 是放在元素上，而不是 active 上，如果放在active上，就没有回去的动作了，大家可以试一下。
第二个就是，transform多个属性的时候，中间用空格来隔开，如果用逗号的话就没反应了。
但如果我在 :active 上加上 transition，
|
1
|
div{ width:50px; height:50px; border-radius:25px; background:#000; transition:1s ease-out;}<br>div:active{ transform:translateX(300px) rotate(780deg);transition:2s ease-in;} |
这样按住的时候，就会执行 active 里面的transition，也就是去的时候用时 2s ，加速运动；而回来的时候执行 div 里的transition ，用时1s 减速运动。
最后就到 animation 了~ animation也是做动画的，不过功能比 transition 更加强大，因为animation可以控制动画的每一步，而transition只能控制开头和结尾。
语法 animation: 关键帧动画名字 、 动画时间 、 动画播放方式（函数） 、 延迟时间 、 循环次数 、 播放方向 、 播放状态 、 动画时间外的属性 ；
关键帧动画名字：就是你要执行的动画的名字，这里要先知道关键帧的语法
|
1
2
3
4
5
6
7
8
9
10
11
|
@keyframes name{ 0%{ ... } 50%{ ... } 100%{ ... } } |
这里的关键帧的名字就是name ，然后百分比的就是动画的进度，可以根据需要设置不同的百分比，再设置不同的动画。
动画时间：和transition一样~
动画播放方式（函数）：和transition的过渡的函数一样~
延迟时间：和transition一样~
循环次数：动画播放的次数，默认为1，通常为整数，如果为 infinite，则无限次地播放；
播放方向：默认为normal，就是正常地向前播放，还有一个值是 alternate ，就是先正向播放，再反向播放，不断地交替；
播放状态：running(默认) 、 paused // 像播音乐一样可以通过动作来暂停动画;
动画时间外的属性: none(默认) 、 forwards 、 backwards 、both；
举个例子吧：
|
1
2
3
4
5
6
|
@keyframes color{ 0%{ background:yellow} 100%{ background:blue}}div{ background:black} |
none： 动画开始前：黑 ； 动画结束后：黑
forwards： 动画开始前：黑 ； 动画结束后：蓝
backwards： 动画开始之前：黄 ； 动画结束后：黑
both： 动画开始前：黄 ； 动画结束后：蓝
就是这么简单~
最后，说一下这三个属性在JS中的写法：
transform：
|
1
2
|
obj.style.transform = "translateX(100px) scale(2)";obj.style.webkitTransform = "translateX(100px) scale(2)";//带浏览器前缀 |
transition：
|
1
2
|
obj.style.transition = "1s";obj.style.webKitTransition = "1s";//带浏览器前缀 |
animation：
|
1
|
obj.style.animation = "name 1s ";//1、关键帧先在css写好；2、兼容写法在关键帧里面写； |
转载自：http://www.cnblogs.com/tagea886/p/6079592.html
原文：http://www.cnblogs.com/zhao-bo/p/6095416.html