CSS3属性中关于制作动画的三个属性：Transform,Transition,Animation。
1、transform：描述了元素的静态样式，本身不会呈现动画效果，可以对元素进行旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
div{transform:scale(2);}
transition和animation两者都能实现动画效果
transform常常配合transition和animation使用
2、transition样式过渡，从一种效果逐渐改变为另一种效果
transition是一个合写属性
transition:transition-property transition-duration transition-timing-function transition-delay
从左到右分别是：css属性、过渡效果花费时间、速度曲线、过渡开始的延迟时间
div{width：100px;height:100px;transition:transform 2s;}div：hover{transform:rotate(180deg);}
transition通常和hover等事件配合使用，需要由事件来触发过渡
3、animation动画 由@keyframes来描述每一帧的样式
div{animation:myAnimation 5s infinite}@keyframes myAnimation {0%{left:0;transform:rotate(0);}100%{left:200px;transform:rotate(180deg);}}
区别：
（1）transform仅描述元素的静态样式，常常配合transition和animation使用
（2）transition通常和hover等事件配合使用，animation是自发的，立即播放
（3）animation可设置循环次数
（4）animation可设置每一帧的样式和时间，transition只能设置头尾
（5）transition可与js配合使用，js设定要变化的样式，transition负责动画效果，如：
/*css:*/div{ width:100px;height:100px;transition:all 1s;}//jsdivEle.onclick = function(){divEle.style.width = "200px";divEle.style.height = "200px";}
