Анимация ключевого кадра CSS с трансляцией трансформирует привязки к целым пикселям в IE 10 и Firefox

Кажется, что IE 10 и Firefox привязывают элементы к целым пикселям при анимации их позиции, используя преобразование 2d в анимации ключевого кадра css.

Chrome и Safari нет, что выглядит намного лучше при анимации тонких движений.

Анимация выполняется следующим образом:

@keyframes bobbingAnim {
   0% {
       transform: translate(0px, 0px);
       animation-timing-function:ease-in-out
   }

   50% {
       transform: translate(0px, 12px);
       animation-timing-function:ease-in-out
   }

   100% {
       transform: translate(0px, 0px);
       animation-timing-function:ease-in-out
   }
}

Вот пример того, что я имею в виду:

http://jsfiddle.net/yZgTM/.

Просто откройте его в Chrome и IE 10 (или Firefox), и вы заметите разницу в гладкости движения.

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

Кто-нибудь знает о попытке заставить браузеры всегда рисовать элементы на субпикселях?

Я нашел этот похожий вопрос, но ответ заключался в анимировании с использованием трансляционного преобразования, что я и делаю: Переход CSS3 к пикселям.

Update: Поиграв немного, я нашел исправление для Firefox, но ничего не делает в IE 10. Трюк состоит в том, чтобы немного уменьшить элемент и использовать translate3d с 1px смещением по оси Z:

@keyframes bobbingAnim {
   0% {
       transform: scale(0.999, 0.999) translate3d(0px, 0px, 1px);
       animation-timing-function:ease-in-out
   }

   50% {
       transform: scale(0.999, 0.999) translate3d(0px, 12px, 1px);
       animation-timing-function:ease-in-out
   }

   100% {
       transform: scale(0.999, 0.999) translate3d(0px, 0px, 1px);
       animation-timing-function:ease-in-out
   }
}

Ответ 1

Мне нравится ваш вопрос! Хорошая работа в уведомлении пиксельной привязки в firefox и IE10.

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

Вот тема, касающаяся проблемы с пиксельной привязкой IE10.

Что вам нужно сделать, так это добавить минимальный поворот к элементу, чтобы IE и Firefox перерисовали его по-другому, что отлично остановит пиксельную привязку:)

Tyr this:

@keyframes bobbingAnim {
  0% {
   transform: translate(0px, 0px) rotateZ(0.001deg);  
   animation-timing-function:ease-in-out
  }
  50% {
    transform: translate(0px, 12px) rotateZ(0.001deg);
    animation-timing-function:ease-in-out
  }
  100% {
   transform: translate(0px, 0px) rotateZ(0.001deg);
   animation-timing-function:ease-in-out
  }
}

Ответ 2

@Nemanja правильно, вы обнаружите, что если вы настроите скорость, вы увидите лучшие результаты, это довольно типично для анимации css. Кроме того, это не имеет особого значения в этом случае, если вы включите аппаратное ускорение. Я немного приукрасил код и запускал его без каких-либо проблем, у меня нет ie10; Тем не менее, мне 11. Вам, возможно, придется просто удалить второе преобразование translateZ, если оно не выполняется в 10

body {
    background-color: #ccc;
}

.bobbing {
    position: absolute;  
    animation: bobbingAnim ease-in-out .5s infinite;
    -moz-animation: bobbingAnim ease-in-out .5s infinite;
    -webkit-animation: bobbingAnim ease-in-out .5s infinite;    
}

.bobbing.text {
    font-size: 50px;
    color: #000;
    left: 30px;
    top: 30px;
}

.bobbing.image {
    left: 30px;
    top: 150px;
    background: url(http://placehold.it/300x100/aa0000&text=Bobbing+image) 50% 50% no-repeat;
    width: 310px;
    height: 110px;
}

@keyframes bobbingAnim {
   50% {
       transform: translate(0, 12px) translateZ(0);       
   }
}

@-webkit-keyframes bobbingAnim {
   50% {
       -webkit-transform: translate3d(0, 12px, 0);       
   }
}

@-moz-keyframes bobbingAnim {
   50% {
       -moz-transform: translate3d(0, 12px, 0);       
   }
}

Ответ 3

Не может быть половина пикселя, нет такой вещи.

Ваша проблема - скорость и плавность анимации, а не "привязка пикселей".