前言

相信很多人对于CSS出来的动画都很惊讶，对于我来说也是神奇的很，今天我就来聊聊实现动画的一些方法，希望对大家有点帮助。

浏览器渲染原理

1. 根据HTML构建HTML树（DOM树）
2. 根据CSS树构建CSS树（CSSOM树）
3. 把两棵树合并成一棵渲染（render tree）
4. layout布局（绘制出文档流 和模型 宽高）
5. Paint(把边框颜色 文字颜色等画出来）

6. Compose(根据层叠关系展示画面）

   
   image.png

CSStransform

CSStransform属性允许你旋转，缩放，倾斜或平移给定元素。

1. transform: translate(20px, 10%)平移

<div class="wrapper">
  <div class="demo"></div>

.demo{
 border:1px solid red;
 height:200px;
 width:100px;
 margin:50px;
}
.demo:hover{
  transform:translate(20px, 10%)
}

image.png

(网址链接：http://js.jirengu.com/wotutotoni/1/edit?html,css,output)

2. transform: scale(1.5)放大放小

<div class="demo"></div>

.demo{
 border:1px solid red;
  height:200px;
  width:100px;
  margin:50px;
  transition:all ls;
}
.demo:hover{
  transform:scaley(1.5);
}

image.png
(网址链接：http://js.jirengu.com/bofitezebo/1/edit?html,css,output）

3. transform: rotate(45deg/0.5turn)旋转

<div class="demo"></div>

.demo{
 border:1px solid red;
  height:200px;
  width:100px;
  margin:50px;
  transition:all 1s;
}
.demo:hover{
  transform:rotate(45deg);
}

image.png
(网址链接:http://js.jirengu.com/xuqonevige/1/edit?html,css,output)

4. transform: skew(30deg, 20deg)倾斜

小技巧

transform: translatex(-50%) translatey(-50%);用来设置水平位置居中

transition过渡

过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。
transition：属性名 时长 过渡方式 延长

1. 属性名可以写all
2. 过渡方式linear|ease|ease-in|ease-out|等
3. 不是所有的都可以过渡，从有到无不用display:none>block 用visibility:hidden>visible
4. opacity不建议用 还占着原来的位置

animation(用于画多次动画 不像transform无法实现）

语法

image.png

<div id="demo"></div>
  <button id="button">开始</button>

#demo{
 border:1px solid red;
  height:200px;
  width:100px;
}
#demo.start{
  animation: xxx 10s ease 3 reverse  both;
}
@keyframes xxx{
 0%{transform:none;} 
 66%{transform:translatex(200px);} 
100%{transform:translatex(120px) translatey(200px);}
}

（网址链接：http://js.jirengu.com/bujaqicawe/1/edit?html,css,js,output）

属性值

animation:时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名

1. 1s或者1000ms
2. 跟transition一样
3. 次数3或者infinite(表示永久）
4. 方向:reverse|alternate|alternate-reverse
5. 填充模式:none|forwards|backwards|both
6. 是否暂停：paused|running
   用两个方法做的跳动的红心（网页链接：http://js.jirengu.com/zifedogilo/edit?html,css,output和http://js.jirengu.com/zevudibuxo/1/edit?html,css,output）

本文为本人的原创文章，著作权归本人和饥人谷所有，转载务必注明来源.