写代码啦
CSS 动画笔记
回复数(0) 浏览数(40)
{{topic.upvote_count || 0}} 编辑 回复

浏览器渲染原理

渲染过程

根据HTML构建HTML树(DOM)
根据CSS构建CSS树(CSSDOM)
将两棵树合并成一颗渲染树(render tree)
Layout布局(文档流、盒模型、计算大小和位置)
Paint绘制(把边框颜色、文字颜色、阴影等画出来)
Compose合成(根据层叠关系展示画面)

三种更新方式

  1. 布局绘制合成
    如:div.remove()
  2. 绘制合成
    如:改变背景颜色
  3. 合成
    如:改变transform

看各属性触发什么方式:CSSTriggers.com

CSS 动画的两种做法(transition 和 animation)

transition

{
transition: margin-right 2s ease-in-out .5s;/* 属性名 | 过渡时长 | 过渡动画 | 延迟 /
transition: margin-right 2s, color 1s;/
多属性写法 /
transition: all 1s ease-out;/
指定所有属性 */
}

animation

{
    animation:name | duration | timing-function | delay | iteration-count | direction | fill-mode | play-state
    animation: 3s ease-in 1s infinite reverse both running slidein;
    animation: 3s linear 1s infinite running slidein;
    animation: 3s linear 1s infinite alternate slidein;
    animation: .5s linear 1s infinite alternate slidein;
}

@keyframs slidein{/* 动画名称 */
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

{{topic.upvote_count || 0}}

浏览器渲染原理

渲染过程

根据HTML构建HTML树(DOM)
根据CSS构建CSS树(CSSDOM)
将两棵树合并成一颗渲染树(render tree)
Layout布局(文档流、盒模型、计算大小和位置)
Paint绘制(把边框颜色、文字颜色、阴影等画出来)
Compose合成(根据层叠关系展示画面)

三种更新方式

  1. 布局绘制合成
    如:div.remove()
  2. 绘制合成
    如:改变背景颜色
  3. 合成
    如:改变transform

看各属性触发什么方式:CSSTriggers.com

CSS 动画的两种做法(transition 和 animation)

transition

{
transition: margin-right 2s ease-in-out .5s;/* 属性名 | 过渡时长 | 过渡动画 | 延迟 /
transition: margin-right 2s, color 1s;/
多属性写法 /
transition: all 1s ease-out;/
指定所有属性 */
}

animation

{
    animation:name | duration | timing-function | delay | iteration-count | direction | fill-mode | play-state
    animation: 3s ease-in 1s infinite reverse both running slidein;
    animation: 3s linear 1s infinite running slidein;
    animation: 3s linear 1s infinite alternate slidein;
    animation: .5s linear 1s infinite alternate slidein;
}

@keyframs slidein{/* 动画名称 */
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

40
回复 编辑