Анимация теней css. Как анимировать «box-shadow»

сравним

Анимация теней css. Как анимировать «box-shadow»

Анимация теней css с гладкой и быстрой производительностью

Как анимировать свойство CSS «box-shadow» не вызывая повторений на каждом кадре, вед это в значительной степени влияет на производительность вашей страницы? Короткий ответ: вы не знаете. Анимационные изменения «box-shadow» будет вредуть производительности.

Однако есть простой способ имитации такого же эффекта с минимальными ре-дублями, который позволит вашей анимации работать на твердом 60 FPS: анимировать opacityпсевдо- элементом.

Давайте сравним (зеленые полоски дублей — чем меньше, тем лучше):

 сравним

На левой стороне, явно больше повторных красок при наведении (анимация box-shadow), по сравнению с картой с правой стороны (которая анимирует opacity с помощью псевдо-элемента).

Почему мы видим этот эффект? Есть очень мало CSS свойств, которые могут быть анимированы без постоянного запуска перерисовки для каждого кадра, а именно opacityи transform. Мы минимизируем количество перерисовок, придерживаясь изменений только для этих двух свойств, в процессе анимации.

Существенная разница между этими двумя методами, размещение всех остальных стилей:

/* Медленный способ */
.делает медленно {
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: box-shadow 0.3s ease-in-out:
}
 
/* Переход к большой тени при наведении */
.делает медленно {
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
 
/* Быстрый способ */
.делает быстро {
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
 
/* Предварительный рендеринг большой тени, но скрывает тень */
.делает быстро::after {
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.3s ease-in-out:
}
 
/* Переход к показу большой тени при наведении */
.делает быстро:hover::after {
  opacity: 1;
}

В примере, который выполняет анимацию лучше, у нас есть два слоя: один для окна, и один для тени, и только свойство теневого слоя оживляет анимацию opacity.

 

Более практичный способ анимации теней

Первый шаг. Давайте добавим весь код макета, чтобы создать карту:

/* Это HTML- <div class="box"></div> */
 
/* Создание простой белой коробки, и добавить тень для начального состояния */
.box {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: all 0.3s ease-in-out;
}
 
/* Создать скрытый псевдо-элемент */
/* Включить тени для конечного состояния */
.box::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  transition: opacity 0.3s ease-in-out;
}

Обратите внимание, что мы добавили transition к .box и .box::after, так как мы будем анимировать оба эти элемента: transform для .box и opacity для .box::after.

Эти стили дают нам белую коробку с тонкой тенью.

Теперь, для того, чтобы создать такой же эффект, как и в нашем примере, нам осталось увеличить масштаб .box на hover, и добавить исчезновение для псевдо-элемента и его тени:

/* Масштабы поля */
.box:hover {
  transform: scale(1.2, 1.2);
}
 
/* Исчезает в псевдо-элемент с большой тенью */
.box:hover::after {
  opacity: 1;
}

Готово! Наведите указатель мыши на окно для предварительного просмотра эффекта:

Подводим итог, вот весь CSS, со всеми приставками ✨????:

.box {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
 
.box::after {
  content: "";
  border-radius: 5px;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  opacity: 0;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
 
.box:hover {
  -webkit-transform: scale(1.25, 1.25);
  transform: scale(1.25, 1.25);
}
 
.box:hover::after {
    opacity: 1;
}
Aliexpress INTAliexpress INTAliexpress INT

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *