CSS动画入门

在很多网页中，我们可以看到很多十分有趣或者炫酷的动画特效，这些都可以由CSS来实现，只需要一点基础和想象力。在了解基础的CSS动画前，明白浏览器是如何渲染这些页面的可以帮助我们更好的进行编程。

简单了解一下浏览器的渲染原理

浏览器有两个引擎，渲染引擎和JS引擎，其中渲染引擎做到了对页面的渲染。那么它是如何工作的呢？

大致分为了以下步骤：

• 根据HTML构建出一棵HTML树（DOM）
• 根据CSS构建CSS树（CSSOM）
• 将两棵树合成一棵渲染树（render tree）
• 渲染布局，包括文档流、盒模型、计算大小和位置
• 绘制边框颜色、文字颜色等等
• 根据层叠关系展示画面

简单了解一下CSS动画中的transition和animation

动画的原理

动画是由许多静止的画面（帧）以一定的速度（如每秒30张，每秒60张）连续播放时，肉眼因为视觉残像产生错觉而误以为时活动的画面。

transition

transition一般配合transform一起来做动画，用transform改变关键帧，transition可以自动补充中间帧。

transform有四个常用功能：

• 位移：translate、translateX、translateY、translateZ、translate3d
• 缩放：scale、scaleX、scaleY
• 旋转：rotate、rotateZ、rotateX、rotateY
• 倾斜：skew、skewX、skewY

transition的语法：

transition: 属性名 时长 过渡方式 延迟

transition:left 200ms linear;

可以用逗号分隔两个不同的属性：

transition:left 200ms,top 400ms;

可以用all代表所有的属性：

transition:all 200ms;

过渡方式有：

linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps

animation

animation要配合@keyframes一起使用，@keyframes有两种语法：

• from to

  @keyframes{
      from{
          transform:tranlateX(0%);
      }
      to{
          transform:translateX(100%);
      }
  }
  

• 百分数

@keyframes{
    0%{top:0;left:0}
    50%{top:50px;left:50px}
    100%{top:100px;left:100px}
}

animation语法

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

• 时长：1s或者1000ms

• 过渡方式：跟transition取值一样，如linear

• 次数：3或者2.4或者infinite

• 方向：reverse|alternate|alternate-reverse

• 填充模式：none|forwards|backwards|both

• 是否暂停：paused|running

• 以上所有属性都有对应的单独属性

以上内容均为近期学习总结，如有不足或错误之处，欢迎补充指正！