Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
haizhilin2013 opened this issue Jun 22, 2019 · 3 comments
Open

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

haizhilin2013 opened this issue Jun 22, 2019 · 3 comments
Labels
软技能 软技能

Comments

@haizhilin2013
Copy link
Collaborator

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

@haizhilin2013 haizhilin2013 added the 软技能 软技能 label Jun 22, 2019
@forever-z-133
Copy link

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
Copy link

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

@MrZ2019
Copy link

MrZ2019 commented Jan 11, 2021

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
Labels
软技能 软技能
Projects
None yet
Development

No branches or pull requests

4 participants