css的动画

Yibo98145
175 阅读4分钟

浏览器渲染原理

  1. 浏览器渲染页面前需要先构建 DOM 和 CSSOM 树。HTML 标记转换成文档对象模型 (DOM)；CSS 标记转换成 CSS 对象模型 (CSSOM)。DOM 和 CSSOM 是独立的数据结构。

两棵树不是一样的

  1. DOM 树与 CSSOM 树合并后形成渲染树。（render tree）
  2. 根据渲染树来布局，以计算每个节点的几何信息。布局计算每个对象的精确位置和大小。（lay out）
  3. 绘制把颜色阴影绘制出来（paint）将各个节点绘制到屏幕上。
  4. 展示页面，根据层叠关系合成（composite）

如何更新样式

一般我们用JS来更新样式:

  1. 添加样式div.style.background = 'red'
  2. 添加类div.classList.add('red')
  3. 比如div.remove()直接删掉节点
  4. 比如div.style.background = 'red'

区别

  1. 例如div.remove()会，全部重走，因为文档流变了需要重新计算布局
  2. 改背景可以跳过layout，直接paint
  3. transform直接composite，相当于把这一块拿起来放到其他地方，因此transform直接合成比left（先relative）性能好

可以在这里查询

transition属性

  1. transition:如果没有这个属性那么所有的状态变化，都是即时完成。transition的作用在于，指定状态变化所需要的时间。过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。
  2. transition属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔
  3. 补充中间帧。必须给出开头和结束，中间自动补齐。一般会有一次或者两次动画开始和倒退动画。比如hover和非hover就是两次动画。
  4. transition: name| duration | delay; transition: margin-right 4s 1s;
  5. 两个属性:transition: margin-right 4s, color 1s;
  6. transition: all 0.5s;所有属性
  7. property name | duration | timing function | delaytransition: margin-right 4s ease-in-out 1s;多出一个过渡方式，具体查mdn
  8. 不是所有属性都能过渡，display: block => none没法过渡，background颜色可以过渡:因为颜色是数字，opacity透明度可以过渡。如果想让一个元素看得见到看不见过渡使用visility: visible => hidden
  9. 当transition属性的值个数超过可以接收的值的个数时，多余的值都会被忽略掉，不再进行解析。

transform属性

位移translate

  • transform: translateX(2px);
  • transform: translateY(3px);
  • transform: translateZ(2px);只在三维平面上才有效果，需要在父元素上加上一个perspective属性，它的属性值是像素意思是3d图的视点，视点就是父元素中心往里多少像素
  • transform: translate3d(x, y, z);X、Y、Z的合写
  • transform: translate(2px,2px);X与Y的合写
  • 特别的如果tanslateX（百分数）那么会位移自身宽度的百分数其参照是变换的边界框的尺寸
  • 注意两条transform代码不会叠加而会覆盖

用translate做绝对居中

  1. 首先对绝对定位元素使用top:50%; left:50%;时，是以左上角为原点定位，如下图，是左上角的原点居中，但是元素本身并不居中。
  2. transform：translate(-50%，-50%):向上（X轴）向左（Y轴）移动自身长宽的50%，使其位于中心。

scale属性

transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
缩放属性很少用回导致变形，例如border会相应变化

rotate属性

transform: rotate(0.5turn);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
旋转，默认是绕z轴转
常用于加载页面

skew倾斜

transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

可以同时使用多个用空格隔开就好

animation属性

@keyframes 规则通过在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序列中的中间步骤。这比transition更能控制动画序列的中间步骤。相当于声明一个动画，之后在相应css选择器后面用animation:动画名; 来使用

  • 一种写法是from to

  • 一种写法是百分数

之后在相应动画部分加上animation:时长|过渡方式|延迟|次数|方向|填充模式 |是否暂停|动画名;

  • 时长: 1s或者1000ms
  • 过渡方式:跟transition取值一样，如linear
  • 次数: 3或者2.4或者infinite
  • 方向: reverse（反过来）| alternate（过去过来） |alternate-reverse（先回在去）
  • 填充模式: none | forwards（到最后一帧了就不回来了） | backwards | both
  • 是否暂停: paused | running
  • 以上所有属性都有对应的单独属性。要是修改直接修改单独属性，不用整个都在写一遍了,在js里写。
avatar
文章
阅读
粉丝