一、
transition 和 animation 不支持 Internet Explorer 9，以及更早的版本。
二、
要变化的属性 transition-property:要变化的属性，比如元素变宽则是width，文字颜色要变色这是color；W3C给出了一个可变换属性的列表： CSS属性 改变的对象 background-color 色彩 （ 渐变色在background不是属于background-color，而是属于background-image。对于background-image要有过 渡效果，你得通过background-position的变化来实现。）background-image 只是渐变 background-position 百分比，长度 border-bottom-color 色彩 border-bottom-width 长度 border-color 色彩 border-left-color 色彩 border-left-width 长度 border-right-color 色彩 border-right-width 长度 border-spacing 长度 border-top-color 色彩 border-top-width 长度 border-width 长度 bottom 百分比，长度 color 色彩 crop 百分比 font-size 百分比，长度 font-weight 数字 grid-* 数量 height 百分比，长度 left 百分比，长度 letter-spacing 长度 line-height 百分比，长度，数字 margin-bottom 长度 margin-left 长度 margin-right 长度 margin-top 长度 max-height 百分比，长度 max-width 百分比，长度 min-height 百分比，长度 min-width 百分比，长度 opacity 数字 outline-color 色彩 outline-offset 整数 outline-width 长度 padding-bottom 长度 padding-left 长度 padding-right 长度 padding-top 长度 right 百分比，长度 text-indent 百分比，长度 text-shadow 阴影 top 百分比，长度 vertical-align 百分比，长度，关键词 visibility 可见性 width 百分比，长度 word-spacing 百分比，长度 z-index 正整数 zoom 数字 该取值还有个强大的“all”取值，表示上表所有属性； 除了以上属性外，当然还有css3中大放异彩的css3变形，比如放大缩小，旋转斜切，渐变等等。
三、
transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
四、
transition-timing-function ：cubic-bezier：特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。
五、
改变两个或者多个css属性的transition效果，那么我们只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时 间和其时间的速率变换方式。
a { -moz-transition: background 0.5s ease-in,color 0.3s ease-out; -webkit-transition: background 0.5s ease-in,color 0.3s ease-out; -o-transition: background 0.5s ease-in,color 0.3s ease-out; transition: background 0.5s ease-in,color 0.3s ease-out; }六、
animation可以不与事件结合，在dom加载完后直接执行，transition不能这样写（transition这样相当于重写）
转载于:https://www.cnblogs.com/hjsblogs/p/5291491.html
相关资源：JAVA上百实例源码以及开源项目