tranform：对象图形变形
tranform的属性包括：
1、none 表示不进行变换；
2、rotate 旋转 transform:rotate(20deg) 旋转角度可以为负数。
需要先有transform-origin定义旋转的基点可为left top center right bottom 或坐标值（50px 70px）。//也就是说要看要基于哪一点旋转。
3、skew 扭曲 transform:skew(30deg,30deg) skew(相对x轴倾斜,相对y轴倾斜)
4、scale 缩放 transform:scale(2,3) 横向放大2倍，纵向放大3倍。如等比放大写一个参数即可。
5、translate 移动 transform:translate(50px, 50px);
6、perspective 镜头到元素平面的距离，所有元素都是放置在z=0的平面上，比如perspective(300px)表示，镜头距离元素表面的位置是300px;//该属性要放在动作属性之前
transition:对象的属性动画
transition: property duration timing-function delay;
| 值 | 描述 |
|---|---|
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function | 规定速度效果的速度曲线。 |
| transition-delay | 定义过渡效果何时开始。 |
eg：
.div{10px;}
.div:hover{transition:100px 2s ease-in-out 1s;}//1s后div原来10px变为100px,所花时间为2s，速度为先加速再减速。
值得深入理解的transition-timing-function状态变化速度，默认值是ease，不是匀速，是逐渐变慢。
除了ease之外，还有包括1、linear:匀速；2、ease-in:加速；3、ease-out:减速；4、cubic-bezier函数：自定义速度曲线模式。（可以用工具网站来定制http://cubic-bezier.com/#.17,.67,.83,.67）；
transition的使用注意：
1、目前，各大浏览器（包括IE10）都已经支持无前缀的transition，所以transition已经可以很安全地不加浏览器前缀。
2、不是所有的css属性都支持transition，完整的列表查看（http://oli.jp/2010/css-animatable-properties/），以及效果（http://leaverou.github.io/animatable/）；
3、transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。比如，height从0变到100px;transition可以算出中间状态，也就是说，如果开始或结束的设置是height:auto,那么不会产生动画效果。类似的情况还有display:none到block,background:url(1.jpg)到url(2.jpg)等。
transition的局限：
1、需要时间触发，所以没法再网页加载时候自动发送；
2、一次性的，不能重复发生，除非一再触发；
3、只能定义开始状态和结束状态，不定定义中间状态，也就是只有两个状态；
4、一条transition规则，只能定意思一个属性变化，不能设计多个属性。
animation:与元素绑定动画效果，是transition属性的扩展，弥补他的不足。
animation: name duration timing-function delay iteration-count direction;
| 值 | 描述 |
|---|---|
| animation-name | 规定需要绑定到选择器的 keyframe 名称。。 |
| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计。 |
| animation-timing-function | 规定动画的速度曲线。 |
| animation-delay | 规定在动画开始之前的延迟。 |
| animation-iteration-count | 规定动画应该播放的次数。 |
| animation-direction | 规定是否应该轮流反向播放动画。 |
在学animation之前首先要先弄懂keyframes，叫做关键帧。
keyframes是什么呢，前面我们再使用transition制作一个简单的transition效果时候，我们包括了初始属性和最终属性，一个开始执行动作时间和延续动作时间以及动作的变换速率，其实这些都是一个中间值，如果我们要控制得更细一点，比如说我要第一时间段执行什么动作效果，第二个时间段执行什么动作，transition就无法实现，此时，我们可以使用keyframes关键帧来控制。
keyframes的语法：
@keyframes animationname {keyframes-selector {css-styles;}}
| 值 | 描述 |
|---|---|
| animationname | 必需。定义动画的名称。 |
| keyframes-selector |
必需。动画时长的百分比。 合法的值：
|
| css-styles | 必需。一个或多个合法的 CSS 样式属性。 |
eg:
@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
animation:mymove 5s ease 0s infinite alternate
先用keyframes定义一个mymove的动画名字，总共分成五个阶段的状态（如上述代码），然后animation调用，动画无延迟，无限次无限循环，历时5s。