前言

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

1. 2D 属性

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

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

备注代码


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

代码备注


    
     transform: rotateX(60deg); x 轴 3D 旋转
    
    
     transform: rotateY(60deg); y 轴 3D 旋转
    
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 复制代码

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 对点击事件获取当前动画执行时间与效果是不清楚，不能根据当前动画执行状态判断逻辑。复制代码

前言

目录

1. 2D 属性

2. 3D 属性

3. transition 动画