很多人在用css3写动画效果的时候总是会搞错，初学者也总是会搞混（抛开它的兼容性，只看效果）。
transform transition animation
好吧，字母在三个词上的重复率比较高，容易混。那我们就简单区分
以上三个我们一次标记为c1、c2、c3
简单来说，c1就是一个类似于width、height这样的样式；c2就强一点了，它让一个属性可以动了，当然了，只是简单动了动，起码证明你在写一个所谓的H5页面；c3就不一样了，它就能定义一个动画流，甚至每个动画帧，这才是用css3的真谛呀，吼吼
那么，具体是怎样的呢，咱们举例子来说
|
1 |
-webkit-transform: translateY(-100px); |
这样点一个设置，等于设置一个margin-top:-100px，去看下w3c，还有几个关于缩放、旋转等
|
1 2 |
div{-webkit-transition: all 1s linear;} div.show{-webkit-transform: translateY(-100px);} |
给一个div添加transition，再给它一个show的class，这样你再看动画，是缓慢移动了位置，那么这样就知道，transition就是把样式变动设置了一个简单的动画过程，当然了，它还有很多中动画设置，时长、延迟等
|
1 2 3 4 5 6 7 8 9 10 11 12 |
div{-webkit-animation: move 1s infinite linear;} @-webkit-keyframes move { 0%{ -webkit-transform: translateY(450px); } 50%{ -webkit-transform: translateY(20px); } 100%{ -webkit-transform: translateY(450px); } } |
好啦，真正的动画来了，首先div有个animation，定义了一个动画叫move，那么下面keyframe就开始对他进行设计了。从开始到50%再到结束，进行了两次移动，并且循环infinite，当然你可以做更详细的定义去，实现更复杂更有意思的动画。
大概三者的区别和配合使用就这样，这里只是简单列举，每个属性都有其他参数，有兴趣大家自己试试吧～