Сглаживание анимации CSS Firefox (сглаживание субпикселей)

Я создаю анимацию ключевого кадра CSS, чтобы элемент выглядел так, как будто он случайно/медленно плавает вокруг немного. Он вложен в родителей, один из которых использует translateX (), чтобы медленно перемещать его влево и вправо, и один, который использует translateY (), чтобы медленно и независимо перемещать его вверх и вниз.

Chrome и Safari прекрасно отображают это,придавая ему постепенное покачивание. Он сглаживает анимацию (возможно, используя сглаживание субпикселей?) так что все выглядит очень гладко. Firefox, однако, анимирует его пиксель за пикселем, поэтому вместо плавного покачивания вы можете видеть, как он прыгает на каждом пикселе.

просмотр JSFiddle в Chrome и FireFox для просмотра разницы:http://jsfiddle.net/gonygdfz/6/

есть ли способ сделать FireFox визуализировать это плавно, а не прыгать пиксель за пикселем? Это очень заметно в самом приложении для этого.

Разметка:

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

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); 
  }
}
11
animation css css-animations firefox

1 ответов

механизмы рендеринга для каждого браузера, очевидно, разные. Firefox не реализует эффект сглаживания для анимации CSS. Это по своей сути не делает его лучше или хуже, это просто зависит от того, что вы оживляете. Например, линейные переходы могут выглядеть нежелательно размытыми в Chrome.

это говорит о том, что вы хотели бы достичь, чтобы иметь сглаженные переходы с сглаживанием сглаживания/субпикселей. Мы не можем изменить то, как работает двигатель, но мы можем. манипулируйте анимацией, чтобы она казалась более мягкой конечному пользователю.

НЕ ВСЕ ПОТЕРЯНО

Я изменил ваш ответ и сделал более плавную версию рядом с оригиналом. Это должно выглядеть мягче при просмотре в Firefox.

НАЖМИТЕ ДЛЯ СРАВНЕНИЯ

методы, используемые для этого эффекта:

  • линейные переходы вместо легкости.
  • Box-тень на анимированных объект. (Смягченный край помогает создать поддельный эффект AA).
  • объект вращаться. Добавление наименьшего поворота помогает лучше использовать механизм рендеринга. †

в 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);}
}

ПОСЛЕДНЕЕ СЛОВО

вы все еще можете настроить эффекты немного в любом случае, чтобы соответствовать вашим требованиям. Она не совершенна, но я надеюсь, что это поможет смягчить эффект для анимации.

† : описание об этой технике можно узнать здесь.

7