CSS 动画属性性能 - 文章教程

CSS 动画属性性能

发布于 2020-06-07 字数 2149 浏览 1001 评论 0

CSS 动画属性会触发整个页面的重排 relayout、重绘 repaint、重组 recomposite

Paint 通常是其中最花费性能的,尽可能避免使用触发paint的CSS动画属性,这也是为什么我们推荐在CSS动画中使用 webkit-transform: translateX(3em) 的方案代替使用 left: 3em,因为 left 会额外触发layout与paint,而 webkit-transform 只触发整个页面 composite

div {
  -webkit-animation-duration: 5s;
  -webkit-animation-name: move;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  width: 200px;
  height: 200px;
  margin: 100px;
  background-color: #808080;
  position: absolute;
}
@-webkit-keyframes move{
  from {
    left: 100px;
  }
  to {
    left: 200px;
  }
}

如下图使用 left 将持续触发页面重绘,表现为红色边框:

CSS 动画属性性能

@-webkit-keyframes move{
  from {
    -webkit-transform: translateX(100px);
  }
  to {
    -webkit-transform: translateX(200px);
  }
}

如下图使用 -webkit-transform 页面只发生重组,表现为橙色边框:

CSS 动画属性性能

CSS 属性在 CSS 动画中行为表

CSS 动画属性性能

参考

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清欢

文章 1 评论 0

贱贱哒

文章 3 评论 0

悸初

文章 2 评论 0

西瓜杏

文章 0 评论 0

各自安好

文章 0 评论 0