Question

我通过添加一个类来激活css font-icon动画。动画缩放图标从1到30，并将color从#000更改为#ff0000。

虽然它在mozilla中运行良好，但它会产生图标比例，如果它是铬，歌剧和野生动物园中的低质量png图像。无法检查ie。

可以通过隔离::before伪元素中的颜色动画来修复chrome和opera。

但是在safari中，即使只是缩放动画，也可以像{pn图像一样对待font-icon。

动画完成后，图标恢复其字体性质，像素化消失。

示例：

仅适用于mozilla http://codepen.io/g1un/pen/Kgrpjq
适用于mozilla，chrome，opera http://codepen.io/g1un/pen/BLzoWp

代码，仅在mozilla中正常运行：

<div>
  <h1></h1> 
</div>

div {
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
}

h1 {
  position: relative;

  font-size: 34px;

  cursor: pointer;
}

h1::before {
  content: 'A';
}

h1.anima {
  animation: anima;
  -webkit-animation: anima;
  animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes anima {
  0% {
      transform: scale(1);
      color: #000;
    }
    100% {
      transform: scale(30);
      color: #ff0000;
    }
}

@keyframes anima {
  0% {
      transform: scale(1);
      color: #000;
    }
    100% {
      transform: scale(30);
      color: #ff0000;
    }
}

$('h1').on('click', function(){
  $(this).addClass('anima');
  var _this = $(this);
  setTimeout(function(){
    _this.removeClass('anima');
  }, 5000);
});

CSS更改，有助于chrome和opera：

h1.anima::before {
  animation: anima-before;
  -webkit-animation: anima-before;
  animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes anima {
  0% {
      transform: scale(1);
    }
    100% {
      transform: scale(30);
    }
}

@keyframes anima {
  0% {
      transform: scale(1);
    }
    100% {
      transform: scale(30);
    }
}

@keyframes anima-before {
  0% {
      color: #000;
    }
    100% {
      color: #ff0000;
    }
}

@-webkit-keyframes anima-before {
  0% {
      color: #000;
    }
    100% {
      color: #ff0000;
    }
}

有没有人知道如何在没有伪元素黑客的情况下更好地制作镀铬和歌剧动画？谁知道safari有什么问题，以及像素化缩放如何在其中修复？

更新：
正如@ZBerg在他的评论中提到的那样：＆＃34;字体平滑选项具有广泛的支持变量。如果某些内容影响了您的桌面配置文件，则可能会产生连锁效应（谷歌 - 屏幕字体的平滑边缘）＆＃34;。
考虑到，我没有更多的铬问题（但你真的有它，你可以通过截图看到，链接在评论中），一些东西真的影响了我的桌面（但我不能完全谷歌smth关于缩放时的平滑问题）总的来说，我想我的问题的完整答案必须包括：

野生动物园的决定（或解释它的错误）;
（可选）解释chrome的错误。

根据解释，我的意思是链接到问题报告或关于铬重现错误的方法。

Answer 1

对我有用的一个解决方案是在这种情况下扩展父级“div”并使其超过他。 CSS

div.anima {
 animation: anima;
 -webkit-animation: anima;
 animation-duration: 3s;
 -webkit-animation-duration: 3s;
 animation-fill-mode: forwards;
 -webkit-animation-fill-mode: forwards;
}

JS：

$('div').on('click', function(){

如下： updated

规模和动作的CSS动画颜色一起导致字体像素化

1 个答案: