CSS Animation初探
动画在交互设计中是一个十分能加分的东西，用以平滑过度，会让用户体验上几个台阶。对于Web开发也是如此，恰当的使用动画可以让网页使用起来更加的用户友好。这里就来探讨一下CSS中一些动画的实现方式，初识前端，不足之处敬请指正。
使用transition来实现动画
transition是CSS3中的属性，它的作用就是让CSS的属性以平滑的渐变动画方式来展现而非突然变化，因此可以用来实现一些简单动画。
语法：transition: property duration timing-function delay
| Value | Description |
|---|---|
| property | 要平滑过度的CSS属性 |
| duration | 平滑过度的时长（动画时长） |
| timing-function | 定义过度效果的速度曲线 |
| delay | 过度效果何时开始 |
像其他的CSS写法一样，这四个值也可以单独指定：
- transition-property
- transition-duration
- transition-timing
- transition-delay
transition的特点
- 每当有transtion所指定的属性发生变化时，动画就会被触发，当然也受transition-delay的控制
- transition生效的前提是元素在DOM中，所以对于属性display: none之类的是不会起作用的
更多关于transition的使用请参考这篇文章，相当的详细。
使用transform来实现动画
transform是CSS3中新加的属性，用以对元素进行2D或3D的变换，这里变换的意思是几何变换，包括旋转，缩放，移动和倾斜旋转等。
- translate，translate3d, translateX, translateY, translateZ
- rotate, rotate3d, rotateX, rotateY, rotateZ
- scale, scale3d, scaleX, scaleY, scaleZ
- skew, skewX, skewY
用这些来指定是进行什么变换，就像名字所指的，translate是进行2D移动，如translate(10, 11)，translate3d是进行3d移动, 如translate3d(1, 0, 10)，后面带坐标轴就是在某一特定方向上移动，其他几个类似。
需要注意几点：
- transform只能定义几何变换，不能进行其他的，比如颜色，背景，透明度等非几何属性
-
指定了transform会立即发生，所以要配合transition一起来使用 用transition来为transform指定时长，变化曲线以及delay的等关键的动画参数，才能成为真正的动画，否则transform也不会有动画效果。如：
transform: translate3d(10, 20, 30); transition: transform 300 ease-in;
- translate移动的距离是相对于没有transform时的位置 比如说某元素原来位置是100， 100, 那么translate(10, 10)，后的位置是110, 110，接着再translate(-10, -10)，后位置是90, 90.
- 还有就是对于translate最好使用translate3d，尽管可能只是一维的移动，translate3d要更平滑一些。
使用key-frame来实现动画
@keyframe规则是专门用来做动画的，它可以指定具体到某一帧的状态是什么样子的，以整数百分比来指定帧数，再给定CSS属性，就组成了一组状态的变化。比如：
@keyframes mymove { 0% {top: 0px;} 25% {top: 200px;} 50% {top: 100px;} 75% {top: 200px;} 100% {top: 0px;} }就是一个简单的移动动画。 具体的可以参考这篇文章，讲述的还是很清楚的。
如何选择
一般来说，如果是移动，旋转或者缩放就使用transform就够了。如果要变化颜色，或者背景色或者可见度，就使用transition就好了。如果是复杂的动画，比如控制多个元素同时做动画，或者动画本身比较复杂还是使用@keyframes。
流行的动画库
这个文章列的很详细，就不再单独的列出来了。如果你知道有其他的库也请与我分享。