Firefox的CSS动画平滑（子像素平滑） [英] Firefox CSS Animation Smoothing (sub-pixel smoothing)

查看：239
本文介绍了Firefox的CSS动画平滑（子像素平滑）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我创建一个CSS关键帧动画有一个元素出现，就好像它是随便/周围有点慢浮动。它嵌套在父母，其中一个使用translateX（）来慢慢移动左和右，和一个其使用translateY（）慢慢地和独立地它上下移动。

Chrome和Safari使这个完美的，给它一个渐进的摇摆运动。它平滑动画（可能使用亚像素平滑？），使一切似乎很顺利。火狐然而，它的动画逐个像素，因此而不是平稳晃动一下，你可以看到它跳在每个像素。

查看在Chrome和Firefox的jsfiddle查看区别： http://jsfiddle.net/gonygdfz/6/

有没有什么办法让Firefox呈现此顺利，而不是它由像素跳跃像素？它在这个实际应用中格外引人注目。

标记：

 ＆LT; D​​IV ID =父＆GT;
    ＆LT; D​​IV ID =移动-X＆GT;
        ＆LT; D​​IV ID =移动-Y＆GT;
            ＆LT; D​​IV ID =孩子＆GT;＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;

CSS的：

  #parent {
    宽度：400像素;
    高度：326px;
    背景色：黄色;
    背景： url(http://paint.net.amihotornot.com.au/Features/Effects/Plugins/Render/Grid_CheckerBoard_Maker/Grid_CheckerBoard_Maker.Paint.NET.001.png)顶部中央的重复;
}#child {
    位置：绝对的;
    顶部：960x75像素;
    左：150像素;
    宽度：100像素;
    高度：100像素;
    背景色：黑色;
    动画：范围-Y 10S无限放心;
}＃移动-X {
    动画：范围-x 10的无穷放心;
    -webkit-动画：范围-x 10的无穷放心;
}
＃移动-Y {
    动画：范围-Y 15S无限放心;
    -webkit-动画：范围-Y 15S无限放心;
}@keyframes范围-X {
  0％{
    变换：translateX（0）;
  }
  30％{
    变换：translateX（-8px）;
  }
  50％{
    变换：translateX（1px的）;
  }
  65％{
    变换：translateX（6像素）;
  }
  80％{
    变换：translateX（0像素）;  }
  89％{
    变换：translateX（-3px）;
  }
  100％{
    变换：translateX（0）;
  }
}
@keyframes范围-Y {
  0％{
    变换：translateY（0）;
  }
  20％{
    变换：translateY（13像素）;
  }
  35％{
    变换：translateY（-1px）;
  }
  70％{
    变换：translateY（-14px）;
  }
  90％{
    变换：translateY（2像素）;
  }
  100％{
    变换：translateY（0）;
  }
}
@ -webkit-关键帧范围-X {
  0％{
    变换：translateX（0）;
  }
  30％{
    变换：translateX（-8px）;
  }
  50％{
    变换：translateX（1px的）;
  }
  65％{
    变换：translateX（6像素）;
  }
  80％{
    变换：translateX（0像素）;  }
  89％{
    变换：translateX（-3px）;
  }
  100％{
    变换：translateX（0）;
  }
}
@ -webkit-关键帧范围-Y {
  0％{
    变换：translateY（0）;
  }
  20％{
    变换：translateY（13像素）;
  }
  35％{
    变换：translateY（-1px）;
  }
  70％{
    变换：translateY（-14px）;
  }
  90％{
    变换：translateY（2像素）;
  }
  100％{
    变换：translateY（0）;
  }
}


解决方案

每个浏览器渲染引擎显然是不同的。 Firefox不落实CSS动画的反锯齿效果。这本身不会使它变得更好或更坏，它只是取决于你是什么样的动画。线性转换可以在Chrome中出现不期望的模糊为例。

这表示，看来你想实现什么是有一个反走样/子像素平滑过渡。我们不能改变发动机呈现的方式，但我们可以操纵动画显示柔和给最终用户。

没有失去一切

我已经修改你的答案，并呈现下一个平滑的版本到你原来的。在Firefox中查看时，这应该会出现较柔和。

点击比较

用于这种效果的技术：


  • 线性过渡，而不是安心。

    • 动画对象
  • 的box-shadow。 （软化边缘有助于制造假AA效果）。

  • 旋转对象。添加最小的旋转有助于更好地利用绘制引擎。 †

CSS 

  #parent {
    宽度：50％;
    浮动：左;
    高度：326px;
    背景色：黄色;
    背景： url(http://paint.net.amihotornot.com.au/Features/Effects/Plugins/Render/Grid_CheckerBoard_Maker/Grid_CheckerBoard_Maker.Paint.NET.001.png)顶部中央的重复;
}
#child {
    位置：绝对的;
    顶部：960x75像素;
    左：150像素;
    宽度：100像素;
    高度：100像素;
    背景色：黑色;
    的box-shadow：0 0 1px的RGBA（0,0,0,0.7）;
    动画：范围-Y 10S无限线性的;
    -webkit-动画：范围-Y 10S无限线性的;
}
＃移动-X {
    动画：范围-x 10的无限线性的;
    -webkit-动画：范围-x 10的无限线性的;
}
＃移动-Y {
    动画：范围-Y 15S无限线性的;
    -webkit-动画：范围-Y 15S无限线性的;
}
@keyframes范围-X {
    0％{变换：translateX（0）;}
    30％{变换：translateX（-8px）旋转（0.02deg）;}
    50％{变换：translateX（1像素），旋转（0deg）;}
    65％{变换：translateX（6像素）旋转（0.02deg）;}
    80％{变换：translateX（0像素）旋转（0deg）;}
    89％{变换：translateX（-3px）旋转（0.02deg）;}
    100％{变换：translateX（0）旋转（0deg）;}
}
@keyframes范围-Y {
    0％{变换：translateY（0）;}
    20％{变换：translateY（13像素），旋转（0.02deg）;}
    35％{变换：translateY（-1px）旋转（0deg）;}
    70％{变换：translateY（-14px）旋转（0.02deg）;}
    90％{变换：translateY（2像素），旋转（0deg）;}
    100％{变换：translateY（0）旋转（0.02deg）;}
}
@ -webkit-关键帧范围-X {
    0％{变换：translateX（0）;}
    30％{变换：translateX（-8px）旋转（0.02deg）;}
    50％{变换：translateX（1像素），旋转（0deg）;}
    65％{变换：translateX（6像素）旋转（0.02deg）;}
    80％{变换：translateX（0像素）旋转（0deg）;}
    89％{变换：translateX（-3px）旋转（0.02deg）;}
    100％{变换：translateX（0）旋转（0deg）;}
}
@ -webkit-关键帧范围-Y {
    0％{变换：translateY（0）;}
    20％{变换：translateY（13像素），旋转（0.02deg）;}
    35％{变换：translateY（-1px）旋转（0deg）;}
    70％{变换：translateY（-14px）旋转（0.02deg）;}
    90％{变换：translateY（2像素），旋转（0deg）;}
    100％{变换：translateY（0）旋转（0.02deg）;}
}

一锤定音

您还可以调整效果一点无论哪种方式，以满足您的需求。
它并不完美，但我希望它有助于软化你的实际动画结束的效果。

的†：这种技术的描述可以发现的这里。的

I'm creating a CSS keyframe animation to have an element appear as if it is casually/slowly floating around a bit. It's nested in parents, one which uses translateX() to slowly move it left and right, and one which uses translateY() to slowly and independently move it up and down.

Chrome and Safari render this perfectly, giving it a gradual swaying movement. It smooths the animation (perhaps using sub-pixel smoothing?) so that everything appears very smooth. Firefox however, animates it pixel by pixel, so rather than smoothly swaying about, you can see it jump at every pixel.

View the JSFiddle in Chrome and FireFox to view the difference: http://jsfiddle.net/gonygdfz/6/

Is there any way to make FireFox render this smoothly rather than having it jumping pixel by pixel? It's extremely noticeable in the actual application for this.

The Markup:

<div id="parent">
    <div id="move-x">
        <div id="move-y">
            <div id="child"></div>
        </div>
    </div>
</div>

The CSS: 

#parent {
    width: 400px;
    height: 326px;
    background-color: yellow;
    background: url(http://paint.net.amihotornot.com.au/Features/Effects/Plugins/Render/Grid_CheckerBoard_Maker/Grid_CheckerBoard_Maker.Paint.NET.001.png) top center repeat;
}

#child {
    position: absolute;
    top: 75px;
    left: 150px;
    width: 100px;
    height: 100px;
    background-color: black;
    animation: range-y 10s infinite ease;
}

#move-x { 
    animation: range-x 10s infinite ease; 
    -webkit-animation: range-x 10s infinite ease;
}
#move-y { 
    animation: range-y 15s infinite ease; 
    -webkit-animation: range-y 15s infinite ease;
}

@keyframes range-x {
  0%   { 
    transform: translateX(0); 
  }
  30% {
    transform: translateX(-8px); 
  }
  50% {
    transform: translateX(1px); 
  }
  65% {
    transform: translateX(6px); 
  }
  80% {
    transform: translateX(0px); 

  }
  89% {
    transform: translateX(-3px); 
  }
  100% {
    transform: translateX(0); 
  }
}


@keyframes range-y {
  0%   { 
    transform: translateY(0); 
  }
  20% {
    transform: translateY(13px); 
  }
  35% {
    transform: translateY(-1px); 
  }
  70% {
    transform: translateY(-14px); 
  }
  90% {
    transform: translateY(2px); 
  }
  100% {
    transform: translateY(0); 
  }
}


@-webkit-keyframes range-x {
  0%   { 
    transform: translateX(0); 
  }
  30% {
    transform: translateX(-8px); 
  }
  50% {
    transform: translateX(1px); 
  }
  65% {
    transform: translateX(6px); 
  }
  80% {
    transform: translateX(0px); 

  }
  89% {
    transform: translateX(-3px); 
  }
  100% {
    transform: translateX(0); 
  }
}


@-webkit-keyframes range-y {
  0%   { 
    transform: translateY(0); 
  }
  20% {
    transform: translateY(13px); 
  }
  35% {
    transform: translateY(-1px); 
  }
  70% {
    transform: translateY(-14px); 
  }
  90% {
    transform: translateY(2px); 
  }
  100% {
    transform: translateY(0); 
  }
}

解决方案

The rendering engines for each browser is obviously different. Firefox does not implement an anti-aliasing effect on CSS animations. This does not inherently make it better or worse, it just depends on what you are animating. Linear transitions can appear undesirably blurred in Chrome for example.

That said it appears what you would like to achieve is to have an anti-aliased/sub-pixel smoothed transitions. We can't change the way the engine renders but we can manipulate the animation to appear softer to the end user.

ALL IS NOT LOST

I have modified your answer and rendered a smoother version next to your original. This should appear softer when viewed in Firefox.

CLICK FOR COMPARISON

Techniques used for this effect:

  • Linear transitions instead of ease.
  • Box-shadow on animated object. (Softened edge helps create fake AA effect).
  • Rotate object. Adding the smallest rotate helps to better utilised the rendering engine. †

CSS

#parent {
    width: 50%;
    float:left;
    height: 326px;
    background-color: yellow;
    background: url(http://paint.net.amihotornot.com.au/Features/Effects/Plugins/Render/Grid_CheckerBoard_Maker/Grid_CheckerBoard_Maker.Paint.NET.001.png) top center repeat;
}
#child {
    position: absolute;
    top: 75px;
    left: 150px;
    width: 100px;
    height: 100px;
    background-color: black;
    box-shadow:0 0 1px rgba(0,0,0,0.7);
    animation: range-y 10s infinite linear;
    -webkit-animation: range-y 10s infinite linear;
}
#move-x { 
    animation: range-x 10s infinite linear; 
    -webkit-animation: range-x 10s infinite linear;
}
#move-y { 
    animation: range-y 15s infinite linear; 
    -webkit-animation: range-y 15s infinite linear;
}
@keyframes range-x {
    0%   {transform: translateX(0);}
    30%  {transform: translateX(-8px) rotate(0.02deg);}
    50%  {transform: translateX(1px) rotate(0deg);}
    65%  {transform: translateX(6px) rotate(0.02deg);}
    80%  {transform: translateX(0px) rotate(0deg);}
    89%  {transform: translateX(-3px) rotate(0.02deg);}
    100% {transform: translateX(0) rotate(0deg);}
}
@keyframes range-y {
    0%   {transform: translateY(0);}
    20%  {transform: translateY(13px) rotate(0.02deg);}
    35%  {transform: translateY(-1px) rotate(0deg);}
    70%  {transform: translateY(-14px) rotate(0.02deg);}
    90%  {transform: translateY(2px) rotate(0deg);}
    100% {transform: translateY(0) rotate(0.02deg);}
}
@-webkit-keyframes range-x {
    0%   {transform: translateX(0);}
    30%  {transform: translateX(-8px) rotate(0.02deg);}
    50%  {transform: translateX(1px) rotate(0deg);}
    65%  {transform: translateX(6px) rotate(0.02deg);}
    80%  {transform: translateX(0px) rotate(0deg);}
    89%  {transform: translateX(-3px) rotate(0.02deg);}
    100% {transform: translateX(0) rotate(0deg);}
}
@-webkit-keyframes range-y {
    0%   {transform: translateY(0);}
    20%  {transform: translateY(13px) rotate(0.02deg);}
    35%  {transform: translateY(-1px) rotate(0deg);}
    70%  {transform: translateY(-14px) rotate(0.02deg);}
    90%  {transform: translateY(2px) rotate(0deg);}
    100% {transform: translateY(0) rotate(0.02deg);}
}

FINAL WORD

You can still tweak the effects a little either way to fit your requirements. It's not perfect but I hope it helps soften the end effect for your actual animation.

† : A description of this technique can be found here.

这篇关于Firefox的CSS动画平滑（子像素平滑）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆