css动画知识总结

浏览器渲染原理

浏览器渲染的过程：

根据HTML标记并构建DOM树

根据CSS构建CSS树（CSSOM）

将两棵树合并成一棵渲染树（render tree layout布局（文档流，盒模型，计算大小或位置等）

paint绘制（边框颜色，背景颜色，阴影等绘制）

compose合成（根据层叠关系展示画面）

1. 通过用transform + transition

实现思路：使用transform属性里的translateX来完成移动，然后加上transition的过渡效果。

实现案例： js.jirengu.com/qotexonazi/…

CSS代码：

#demo {
  width: 50px;
  height: 50px;
  background-color: red;
  /*给demo加一个简单的样式以方便查看*/
  transition: all 1s;
}
#demo.go{
  transform:translateX(100px);
  /*这里提前写一个类go，用translateX来完成向右移动*/
}

CSS代码有两行重点：

transition: all 1s; 让整个移动在1s内完成， transition的作用就是给我开头和结尾，我来补充中间帧

transform:translateX(100px); 用translateX(100px)来实现右移

JS代码：

start.onclick = function(){
  demo.classList.add('go');
 //给按钮添加点击事件，当点击按钮的时候，就给demo加上go类
}

实现效果：

2.用animation

animation的核心就是定义关键帧，其中go是这个动画的名字

1.第一种写法，用from, to
@keyframes go {
  from {transform:none;}
  
  to {transform:translateX(100px);}
}

2.第二种写法
@keyframes go {
  0 {transform:none;}
  100% {transform:translateX(100px);}
}

然后，多写一个start类，指定让go运行2秒

#demo.start{
  animation:go 2s;
}

JS添加上这个类：

start.onclick = function(){
  demo.classList.add('start');
 //给按钮添加点击事件，当点击按钮的时候，就给demo加上go类
}

预览效果： js.jirengu.com/zofaxafiba/…

关于transition的总结

transition就是过渡的意思，作用就是我一个行为开头和结尾，然后中间我来帮你添加一个过渡的效果。

/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;

/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* Apply to 2 properties */ 用逗号隔开
transition: margin-right 4s, color 1s;

/* Apply to all changed properties */ 用all表示给所有Property添加动画
transition: all 0.5s ease-out;

关于animation的总结

animation组成部分

1.关键帧 keyframes

2.animation 属性

因为我们可以在任意一个点指定关键帧，所以animation可以用来做更复杂的动画