Skip to content

[软技能] 第68天 js动画和css动画有什么区别? #493

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第68天 js动画和css动画有什么区别?

Activity

forever-z-133

forever-z-133 commented on Jun 28, 2019

@forever-z-133

js 动画

  1. 会进入函数调用栈,走完事件循环才会走渲染,如果过程中还有频繁获取 dom 状态恐怕是药丸。
  2. 但相比 css 动画(不考虑 css 变量),js 动画可配置目标值或速率等,搭配 transition 挺不错。
  3. 且 js 动画做暂停、反向和复杂的节奏都要更棒。
  4. 再比如弧形运动轨迹,对 css 动画而言恐怕就比较难搞了。

css 动画

  1. 非常简易的 hover active checked 等动效用 css 来写真是太方便了。
  2. 对循环播放的动画,多数情况下也是 css 动画更佳。
  3. css 动画库的复用感觉会相较高很多。
  4. 至于所谓的 gpu 加速或 will-change 很难讲哟,真的有效,但却不是很懂。
chenyuwen456456

chenyuwen456456 commented on Jul 5, 2020

@chenyuwen456456

能用css实现的动画 就用css实现

smile-2008

smile-2008 commented on Jan 11, 2021

@smile-2008

js 动画

  1. 会进入函数调用栈,走完事件循环才会走渲染,如果过程中还有频繁获取 dom 状态恐怕是药丸。
  2. 但相比 css 动画(不考虑 css 变量),js 动画可配置目标值或速率等,搭配 transition 挺不错。
  3. 且 js 动画做暂停、反向和复杂的节奏都要更棒。
  4. 再比如弧形运动轨迹,对 css 动画而言恐怕就比较难搞了。

css 动画

  1. 非常简易的 hover active checked 等动效用 css 来写真是太方便了。
  2. 对循环播放的动画,多数情况下也是 css 动画更佳。
  3. css 动画库的复用感觉会相较高很多。
  4. 至于所谓的 gpu 加速或 will-change 很难讲哟,真的有效,但却不是很懂。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@haizhilin2013@forever-z-133@chenyuwen456456

        Issue actions

          [软技能] 第68天 js动画和css动画有什么区别? · Issue #493 · haizlin/fe-interview