5

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

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%;
}
<div class="box"> </div>

При наведении на блок, фон начинает дергаться и как-то с задержками изменяться.

Это можно как-то исправить (сгладить), если применять transition именно к background-size (со 150% до 100%)?

P.S: С transform: scale; я знаю решение, спасибо!

2
  • Подозреваю без scale никак. Насколько я понимаю в этом контейнере будет контент, но тогда можно фон закинуть в :before и его уже скэйлить ) 14 окт 2016 в 7:29
  • @ArtemGorlachev, Спасибо =))))) "С transform: scale; я знаю решение, "
    – SVE
    14 окт 2016 в 7:49

3 ответа 3

4

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

-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);
}
<div class="box-c">
  <div class="box"></div>
</div>

1
  • Вы тоже не прочитали задание. И js тут при чем, о нем вообще речь не шла
    – SVE
    14 окт 2016 в 6:09
3

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

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

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

5
  • Возможно, моя объяснение ложное — это личная догадка.
    – doubleui
    12 окт 2016 в 18:40
  • Подергивание есть все-равно. Просто оно быстрее. Можно заметить если приглядеться.
    – Telion
    12 окт 2016 в 18:42
  • all 5s ease меньше, но все же есть. Тоже как-то читала о задании округленного значения для transition (т.е. не 1.275, а 1), но тут что-то не помогает.
    – SVE
    12 окт 2016 в 18:44
  • Можно попробовать @keyframes, указав нужные значения от 0 до 100% кадров. Но это раздует CSS в разы. Либо использовать дополнительно JS. Вот пример библиотеки (сам не пробовал): github.com/branneman/…. Можно попробовать перехватывать значение background-size, оборачивая его в, условно, var size = parseInt(size, 10); if (size % 2 !== 0) { size += 1; }, пропуская нечетные значения (или наоборот).
    – doubleui
    12 окт 2016 в 19:05
  • Я думаю правильней тогда будет сделать дополнительный блок в котором будем менять размеры самой картинки, а не фоновой. Можно будет использовать scale и т.д.
    – Telion
    12 окт 2016 в 19:11
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);
}
<div class="box-c">
  <div class="box"></div>
</div>

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

1
  • со scale я знаю решение!!! Вопрос был "transition именно к background-size?" Читайте внимательнее!
    – SVE
    13 окт 2016 в 5:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.