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

#html #css

Есть такой блок с фоном и эффектом:



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

Вы видите «дергание», потому что используете очень большое время анимации. Если поставить
1 секунду, анимация проходит гладко: https://jsfiddle.net/0c4mqLp8/.

Экспериментируйте с параметрами:
all 5s ease или all 1s ease-in-out, например. У меня оба варианта работают гладко.

Почему происходит скачки: ваша картинка выровнена по-центру блока. Изменяя масштаб,
ширина картинки меняется то на четное, то на нечетное значение. Пиксель — самая маленькая
единица измерения: центр делит картинку пополам и при четном значении картинка делится
поровну, а при нечетном остается 0.5 пикселей, которые и придают дергание фоновому
изображению — оно перемещается то влево, то вправо.


Ответ 2

Попробуйте поставить кривую Безье более плавную в начале и конце:

-webkit-transition: all 5s cubic-bezier(.6,0,.4,1);
transition: all 5s cubic-bezier(.6,0,.4,1);




Javascript не даст вам большей производительности, чем CSS, т.к. трансформация в 
CSS производится с использование аппаратного ускорения.

Вот ресурс для генерации кривых Безье: http://cubic-bezier.com/#.6,0,.4,1



html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  box-sizing: conten-box;
}

.box-c {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.box {
  width: 100%;
  height: 100%;
  background: url(http://www.nasa.gov/sites/default/files/thumbnails/image/potw1441a.jpg)
center no-repeat;
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
  -webkit-transition: all 5s cubic-bezier(.6,0,.4,1);
  transition: all 5s cubic-bezier(.6,0,.4,1);
  position: absolute;
  background-size: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.box:hover {
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: scale(1);
          transform: scale(1);
}

  




Ответ 3

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  box-sizing: conten-box;
}

.box-c {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.box {
  width: 100%;
  height: 100%;
  background: url(http://www.nasa.gov/sites/default/files/thumbnails/image/potw1441a.jpg)
center no-repeat;
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
  -webkit-transition: all 5s cubic-bezier(0.7, 0.72, 0.71, 0.72);
  transition: all 5s cubic-bezier(0.7, 0.72, 0.71, 0.72);
  position: absolute;
  background-size: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.box:hover {
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: scale(1);
          transform: scale(1);
}

  






Можно еще так попробовать как вариант