Chrome中的快速CSS转换

我在背景图像上使用CSS3变换在悬停时放大

我已经在Opera、Safari和Firefox的最新浏览器中进行了测试，工作非常顺利，但是在Chrome中，转换非常不稳定

这是链接，将鼠标悬停在社交图标上，看看我的意思我注意到，当您将浏览器调整为移动视图时，情况会变得更糟

我在这里做了一个JSFIDLE版本，并减慢了转换速度，因为它更难看到

-这在chrome和firefox中看起来很不稳定，在safari和opera中则很流畅

我能做些什么使过渡更平滑吗

如果您无法查看JSFIDLE，下面是代码

.social{
位置：相对位置；
列表样式：无；
}
.social>li>a{
文本缩进：100%；
空白：nowrap；
溢出：隐藏；
颜色：透明；
}
.social>li>a{
文本缩进：100%；
空白：nowrap；
溢出：隐藏；
颜色：透明；
}
.fbook、.twit、.tmblr、.pntrst、.insta{
背景：url(http://placehold.it/350x150)中心；
宽度：78px；
高度：90px；
背景尺寸：封面；
浮动：左；
利润率：30像素；
-webkit过渡：所有0.8秒轻松；
-moz转换：所有0.8秒的易用性；
过渡：所有0.8秒缓解；
}
.fbook{背景位置：0}
.twit{背景位置：-78px 0}
.tmblr{背景位置：-156px 0}
.pntrst{背景位置：-232px 0}
.insta{背景位置：-310px 0}
.fbook:hover、.twit:hover、.tmblr:hover、.pntrst:hover、.insta:hover{
-webkit转换：比例（1.5）；
-moz变换：比例（1.5）；
转换：比例（1.5）；
}

在Chrome中，转换似乎比转换更有效。试试这个：

.social{
位置：相对位置；
列表样式：无；
}
.social>li>a{
文本缩进：100%；
空白：nowrap；
溢出：隐藏；
颜色：透明；
}
.social>li>a{
文本缩进：100%；
空白：nowrap；
溢出：隐藏；
颜色：透明；
}
.fbook，
特维特先生，
.tmblr，
.pntrst，
.insta{
背景：url(http://placehold.it/350x150)中心；
宽度：78px；
高度：90px；
背景尺寸：封面；
浮动：左；
利润率：30像素；
-webkit转换：转换（0px，0）；
-webkit转换：-webkit转换0.8秒易用性；
-moz变换：平移（0px，0）；
-moz转换：-moz转换0.8s易用性；
转换：转换（0px，0）；
转换：-webkit转换0.8秒易用性；
}
.fbook{
背景位置：0
}
特维特先生{
背景位置：-78px 0
}
.tmblr{
背景位置：-156px 0
}
.pntrst{
背景位置：-232px 0
}
.insta{
背景位置：-310px 0
}
.fbook:悬停，
特维特：悬停，
.tmblr:悬停，
.pntrst:悬停，
.insta:悬停{
-webkit转换：比例（1.5）；
-moz变换：比例（1.5）；
转换：比例（1.5）；
}

基本问题

当动画运行缓慢且看起来不均匀时，它只是暴露了浏览器始终存在的限制

浏览器没有用于渲染动画的专用线程。动画必须与其他浏览器活动（如UI事件）竞争。有时，浏览器也在与计算机上运行的其他软件竞争。另外，浏览器可用的硬件加速可能有些有限

使用“缓和”的动画在动画的开始和/或结束时运行得更慢，这使得动画的自然不均匀性更加明显

解决方案

防止不均匀变得如此明显的最简单的解决方案是提高动画的速度，并有选择地删除或减少“缓和”的使用。也许可以使用一种在开始和结束时都不会减速的放松方式

---

展望未来，另一个选择是使用WebGL（具有3D上下文的HTML5画布标记）的硬件加速，这将减少问题。随着硬件加速变得越来越普遍，浏览器和设备上的支持也越来越强，制作复杂的动画应该开始变得可行，可以像旧的Flash动画一样流畅地运行。

2017年更新

为了回应@Matt Coughlin的帖子，原本支持动画的浏览器现在在自己的线程上呈现CSS和JS动画

基于CSS的动画和本机支持的Web动画通常在称为“合成器线程”的线程上处理。这与浏览器的“主线程”不同，后者执行样式、布局、绘制和JavaScript。这意味着，如果浏览器在主线程上运行一些昂贵的任务，这些动画可以继续运行而不会被中断

此开发者文档还支持@user1467267当前接受的答案

在可能的情况下，应避免设置触发布局或绘制的特性的动画。对于大多数现代浏览器，这意味着将动画限制为不透明度或变换，这两种浏览器都可以进行高度优化；动画是由JavaScript还是CSS处理并不重要

该文档还建议使用

将更改要设置动画的属性的

属性，以便浏览器可以对这些属性执行其他优化。在我个人的经验中，这似乎只在chrome的不透明度和变换中明显

element{
  will-change: transform, opacity;
}

---

称保罗为爱尔兰人这仍然是事实。变换的动画效果总是更加流畅。如果不是

-moz变换：-moz变换0.8秒和
转换：转换0.8s轻松？所以在编辑和修复一个错误后，我注意到另一个错误；-@天哪，你说得对