CSS动画的两种属性

dsplk
320 阅读2分钟

渲染器渲染原理

浏览器渲染过程

  1. 根据html构建html树
  2. 根据css构建css树
  3. 将这两颗树合并成渲染树
  4. 在浏览器上进行layout布局（文档流、盒模型、位置大小。）
  5. 进行paint绘制（颜色、阴影进行描绘）
  6. 合成compose（根据层叠关系展示画面）

更新样式

一般采用js来更新样式

div.style.background = 'red'

但是，不同的属性会触发不同的浏览器更新方式，常见三种更新方式



  • 第一种，重新渲染
  • 第二种，跳过layout
  • 第三种，跳过layout和paint

想要知道什么属性会触发浏览器渲染的什么流程，可以使用这个网站： csstriggers.com/，这个网站把css常见的属性渲染流程全都实验过了。

css动画

常用的制作css动画的属性有两个：transform和 animation

transform属性

实现旋转(rotate)，缩放(scale)，倾斜(skew)或平移(transform)给定元素。

  • rotate
transform: rotateX(10deg);   //在x轴方向移动10度
transform: rotateY(10deg);
transform: rotateZ(10deg);
一般用于制作加载的过程的旋转360的小组件
  • scale
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
  • 倾斜
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
  • 平移
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);

translate(-50%,-50%)可以做绝对定位元素的居中

left:50%;
transform:translateX(-50%);  /*或者垂直方向居中*/
top:50%;
transform:translateY(-50%);

left:50%;
top:50%;
transform:(-50%,-50%);

transition属性

如果需要动画效果，需要进行transition进行过渡，可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。

/* 要过渡的属性 | 持续时间 | 过渡的形式 | 延迟时间 */
transition: margin-right 4s ease-in-out 1s;
  • 常用过渡方式：linear  ease  ease-in  ease-out  step-start  step-end  steps
  • 有些属性不能过渡
  1. display:none=>block没法过渡，不要使用这个过渡
  2. 改成visibility:hidden=>visible(记就行了，CSS没有为什么)
  3. background可以过渡
  4. opacity可以过渡，但是不推荐
  • 过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。

animation属性

/* @keyframes duration | timing-function | delay |
   iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
@keyframes slidein {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
  • 方向：reverse  alternate   alternate-reverse
  • 次数：无限次是infinity

  • 填充模式：none  forwards  backwards  both

  • 是否暂停：paused  running


avatar
文章
阅读
粉丝