在 Chrome 上使用 CSS 过滤器进行波涛汹涌的变换

Question

我正在做一个悬停效果，可以增加图像亮度并在悬停状态下缩放图像。由于某种原因，CSS 过滤器的转换似乎起伏不定。知道为什么这会使转换变得不稳定吗？似乎在 Safari 和 Firefox 上运行流畅。

基本上我是这样做的：

.parent
  width 300px
  height 300px
  overflow hidden
  img
    transition: all 1s ease-out
    transform: translate(0px, 0);
    filter: brightness(80%)
    &:hover
      transform: scale(1.1)

在此处查看完整演示：http://codepen.io/tzzo/pen/MmKeVm

谢谢。

Answer 1

刚看了一下Chrome56上的codepen，对我来说真的很流畅。但是，如果您想增加悬停时的图像亮度，您还需要将滤镜添加到悬停中：

img:hover {
  -webkit-filter: brightness(100%)
  filter: brightness(100%)
}

Answer 2

在悬停属性中使用此代码-

.parent img:hover {-webkit-transform: scale(1.1);  -moz-transform: scale(1.1);  -o-transform: scale(1.1);  -ms-transform: scale(1.1);  transform: scale(1.1);  opacity: 1.0;  filter: brightness(150%);}

Answer 3

我在我的机器上看不到这个问题，但我在其他时候遇到过这个问题

您可以尝试通过添加 transform3d

在元素上触发硬件加速

.parent
  width 300px
  height 300px
  overflow hidden
  img
    transition: all 1s ease-out
    transform: translate3d(0,0,0)
    filter: brightness(80%)
    &:hover
      transform: scale(1.1) translate3d(0,0,0)

请注意，在悬停规则中更改转换时需要重新应用转换

Answer 4

我想出了一个轻量级且支持良好的实现。

我放弃了 CSS 过滤器并决定改用 opacity。如果图像的背景与不匹配，则必须单独设置。

img
  background-color: black
  opacity: 0.8
  transition: all 3s ease-in-out
  &:hover
     opacity: 1
     transform: scale(1.1)

为我的笔添加了工作解决方案：http://codepen.io/tzzo/pen/MmKeVm

在 Chrome 上使用 CSS 过滤器进行波涛汹涌的变换

Choppy transform with CSS filter on Chrome

css

google-chrome

stylus

pug