×

全面梳理 CSS3 动画

96
梁同桌
2017.12.30 12:42 字数 347

前言

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

目录

  1. 2D 属性
  2. 3D 属性
  3. transition 动画
  4. keyframes
  5. 优缺点总结

1. 2D 属性

我用了 transition 与 hover 诠释这几个 2D 属性,windth、height 其它很多导致外观变化的属性几乎都可以变成动画。
简书不能镶嵌 iframe,就看不见动画效果了, 你可以到我的博客看这篇文章 :http://liangtongzhuo.com/atricle.html?5a46f1039f545400454bfc6e

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

备注代码

<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 动画

<iframe width="100%" height="300" src="//jsfiddle.net/liangtongzhuo/mph06yw2/3/embedded/html,css,result/" allowpaymentreqeust allowfullscreen="allowfullscreen" frameborder="0"></iframe>
代码备注

<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

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

Web杂货店
Web note ad 1