前言

主要内容：CSS3 动画有那些属性？动画怎么实现，几种方法？javaScript 与它优缺点？

1. 2D 属性

我用了 transition 与 hover 诠释这几个 2D 属性，windth、height 其它很多导致外观变化的属性几乎都可以变成动画。

掘金不能镶嵌 iframe，就看不见动画效果了，你可以到我的博客看这篇文章：http://liangtongzhuo.com/atricle.html?5a46f1039f545400454bfc6e

备注代码

<div class="translate">transform: translate(5px,5px); 位移</div>
<div class="rotate">transform: rotate(30deg); 旋转</div>
<div class="scale">transform: scale(2,4); 放大缩小</div>
<div class="skew">transform: skew(0deg,90deg);  Y 倾斜角 30 度，不常用</div>
<div class="matrix">transform:matrix(0.866,0.5,-0.5,0.866,0,0);矩阵 不常用，但很厉害。</div>


div {
  background-color: 	#87CEFA;
  margin-top:30px;
  transition: 2s;
}

.translate:hover{
  transform: translate(5px,5px);
 }
 
.rotate:hover{
transform: rotate(30deg); 
}

.scale:hover{
transform: scale(2,4); 
}

.skew:hover{
transform: skew(0deg,30deg);
}

.matrix:hover{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
}

还有一个 transform-origin 属性，示例程序 http://www.w3school.com.cn/example/css3/demo_css3_transform-origin.html

2. 3D 属性

3D 属性几个和上边几乎是相似的， 3D 还牵扯到透视问题以后再说（https://developer.mozilla.org/en-US/docs/Web/CSS/perspective）

代码备注

<div class="rotateX">transform: rotateX(60deg); x 轴 3D 旋转</div>
<div class="rotateY">transform: rotateY(60deg); y 轴 3D 旋转</div>
div {
  background-color: 	#87CEFA;
  margin-top:30px;
  transition: 2s;
}

.rotateX:hover{
transform: rotateX(60deg);
  }
  
  .rotateY:hover{
transform: rotateY(60deg);
  }

3. transition 动画

代码备注 ```

div { background-color: #87CEFA; margin-top:30px; width:50px; height:50px; transition: 1s 0.5s width linear; }

.rotateX:hover{ width: 100px; }

transition 动画时间1秒，延迟0.5秒执行 ，只有 width 执行动画， linear 匀速动画

（1）linear：匀速（2）ease-in：加速（3）ease-out：减速（4）cubic-bezier函数：自定义速度模式自定义速度 http://cubic-bezier.com/#.17,.67,.83,.67



#  4. keyframes 
<iframe width="100%" height="300" src="//jsfiddle.net/liangtongzhuo/vvdjnuvo/2/embedded/html,css,result/" allowpaymentreqeust allowfullscreen="allowfullscreen" frameborder="0"></iframe>

animation-name 规定 @keyframes 动画的名称。 animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 animation-timing-function 规定动画的速度曲线。默认是 "ease"。 animation-delay 规定动画何时开始。默认是 0。 animation-iteration-count 规定动画被播放的次数。默认是 1。 animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。


# 5. 优缺点总结

优点：CSS3 能很方便的做出动画， 并不需要修改 DOM 和书写 JavaScript 非常便捷。尤其是配合 hover，来写鼠标移动的特效。
缺点：CSS3 对点击事件获取当前动画执行时间与效果是不清楚，不能根据当前动画执行状态判断逻辑。

全面梳理 CSS3 动画

前言

目录

1. 2D 属性

2. 3D 属性

3. transition 动画