全面梳理 CSS3 动画

2017-12-30 本文已影响36人梁同桌

前言

主要内容：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）
<iframe width="100%" height="300" src="//jsfiddle.net/liangtongzhuo/r7p31dfx/2/embedded/html,css,result/" allowpaymentreqeust allowfullscreen="allowfullscreen" frameborder="0"></iframe>

代码备注

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