Сглаживание анимации фона

Есть такой блок с фоном и эффектом:
html, body { margin: 0; padding: 0; width: 100%; height: 100%; } .box { width: 100%; height: 100%; background: url(http://www.nasa.gov/sites/default/files/thumbnails/image/potw1441a.jpg) center no-repeat; -webkit-background-size: 150%; background-size: 150%; transition: all 5.27s ease-in-out; } .box:hover { -webkit-background-size: 100%; background-size: 100%; }

При наведении на блок, фон начинает дергаться и как-то с задержками изменяться.
Это можно как-то исправить (сгладить), если применять transition именно к background-size (со 150% до 100%)?
P.S: С transform: scale; я знаю решение, спасибо!

Ответ

Вы видите «дергание», потому что используете очень большое время анимации. Если поставить 1 секунду, анимация проходит гладко: https://jsfiddle.net/0c4mqLp8/
Экспериментируйте с параметрами: all 5s ease или all 1s ease-in-out, например. У меня оба варианта работают гладко.
Почему происходит скачки: ваша картинка выровнена по-центру блока. Изменяя масштаб, ширина картинки меняется то на четное, то на нечетное значение. Пиксель — самая маленькая единица измерения: центр делит картинку пополам и при четном значении картинка делится поровну, а при нечетном остается 0.5 пикселей, которые и придают дергание фоновому изображению — оно перемещается то влево, то вправо.