1

У меня есть карточки, при наведении на которые, происходит анимация, но она жутко лагает при загрузке страницы. Как-то ее можно оптимизировать, чтобы анимация осталась такой же? Вся анимация на css. Ссылка на Codepen

.card {
  width: 365px;
  height: 425px;
  margin: 10px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, black, #3d3d3db0 49%, black 100%);
  will-change: box-shadow;
  transition: .3s;
  box-shadow: 0px 40px 150px rgba(255, 70, 12, 0), 0px 3.67258px 13.8188px rgba(105, 12, 255, 0), 0px 1.57955px 5.94339px rgba(105, 12, 255, 0);
}

.card__active .card__title {
  transition: .4s;
}

.card__active:hover .card__title--hidden {
  opacity: 0;
}

.card__active:hover .card__body--animation {
  opacity: 1;
  transform: translateY(0);
}

.card__body--animation {
  opacity: 0;
  transform: translateY(200px);
  transition: .4s;
}

.card__body {
  position: absolute;
  left: 20px;
  bottom: 20px;
  right: 20px;
}

.card__title--hidden {
  position: absolute;
  left: 20px;
  bottom: 20px;
  right: 20px;
  transition: .4s;
}

.card:hover {
  z-index: 10;
  transform: translateY(-10px) translate3d(0, 0, 0);
  box-shadow: 0px 40px 150px rgba(255, 70, 12, 0.75), 0px 3.67258px 13.8188px rgba(105, 12, 255, 0.317236), 0px 1.57955px 5.94339px rgba(105, 12, 255, 0.219576);
}

.card__img {
  width: 100%;
  transition: .3s;
  will-change: filter, transform;
}

.card:hover .card__img {
  -webkit-filter: blur(10px);
  filter: blur(10px);
  transform: translateY(-20px) translate3d(0, 0, 0);
}

.card__link {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}

.card__link--hover {
  height: 100%;
}

.card__title {
  font-family: 'Montserrat';
  font-weight: 700;
  font-size: 28px;
  color: #ffffff
}

.card__text {
  margin-top: 10px;
  font-size: 16px;
  color: #ffffff
}
<div class="card card__active">
  <a href="#" class="card__link card__link--hover"></a>
  <img class="card__img" src="https://st2.depositphotos.com/1064024/10769/i/600/depositphotos_107694484-stock-photo-little-prince-illustration.jpg" loading="lazy" alt="">
  <h3 class="card__title card__title--hidden">Название</h3>
  <div class="card__body card__body--animation">
    <h3 class="card__title">Название</h3>
    <p class="card__text">
      Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов.
    </p>
  </div>
</div>

3
  • 3
    Всё дело в том, что box-shadow очень тяжелый для анимации 16 апр 2021 в 13:26
  • 1
    Я недавно задавал похожий вопрос: ru.stackoverflow.com/q/1267145/331312 если сможете, то адаптируете под себя 16 апр 2021 в 13:27
  • 2
    Вам можно так сделать: по умолчанию у вас будет box-shadow, только он будет скрыт с помощью opacity: 0. А при наведении вы этому блоку будете давать opacity: 1 16 апр 2021 в 13:29

1 ответ 1

5

Вот такую штуку навоял, вроде, без лагов.

У меня тут одна удобная штука есть, можно задать CSS переменную --title нужным текстом и этот текст продублируется в два места, где он используется

В чём была ваша проблема:

1.
Вы использовали transition: ease 0.4s или transition: .4s. Это короткая запись свойства transition: all ease .4s. То есть у элемента будут анимироваться и пытаться анимироваться абсолютно все свойства которые существуют. Это плохо, так не надо делать.

Лучше писать: transition: color 0.4s linear или полную запись каждого свойства:

transition-timing-function: linear;
transition-duration: 0.4s;
transition-property: color;

Если в такой полной записи записи вы не напишите transition-property: color; какое-то свойство, то тут будет стоять значение all, а это плохо

2.
Вы пытались анимировать свойство box-shadow. Это свойство очень тяжело анимировать браузеру, потому что там очень активно меняются размеры тени. Лучше скрывать/показывать тень, которая уже есть (например, с opacity: 0 на opacity: 1 менять)

3
Вы начали использовать свойство will-change, чтобы решить вашу проблему с box-shadow это не очень хорошо, потому что с помощью этого свойства вы заставляете браузер плясать под вашу дудку, а ваша дудка не будет оптимизированной для браузера, лучше ему самому решать

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
}

.card {
  display: block;
  user-select: none;

  max-width: 300px; /* можно задать любую ширину/высоту для элемента */
  font-size: 16px;

  --paddingCard: 10px;
  --title: 'Заголовок';
  --transitionTimingFunction: ease;
  --transitionDuration: 0.4s;
}

.card__hover {
  position: relative;
  color: white;
  background: linear-gradient(135deg, black, #3d3d3db0 49%, black 100%);
  
  transition-timing-function: var(--transitionTimingFunction);
  transition-duration: var(--transitionDuration);
  transition-property: transform;
}

.card_active .card__hover {
  cursor: pointer;
}

.card__padding {
  padding: var(--paddingCard);
}

.card__overflow {
  overflow: hidden;
  position: relative;
}

.card__img {
  pointer-events: none;
  overflow: hidden;
  position: relative;
}

.card__img > img {
  transition-timing-function: var(--transitionTimingFunction);
  transition-duration: var(--transitionDuration);
  transition-property: filter;
}

.card__box-shadow {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0px 40px 150px rgba(255, 70, 12, 0.75), 0px 3.67258px 13.8188px rgba(105, 12, 255, 0.317236), 0px 1.57955px 5.94339px rgba(105, 12, 255, 0.219576);
  opacity: 0;

  transition-timing-function: var(--transitionTimingFunction);
  transition-duration: var(--transitionDuration);
  transition-property: opacity;
}

.card__title {
  font-size: 1.75em;
  font-weight: bold;
}

.card__title-previe {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translate(-50%, 0);

  transition-timing-function: var(--transitionTimingFunction);
  transition-duration: var(--transitionDuration);
  transition-property: opacity;
}

.card__title-previe::before {
  content: var(--title);
}

.card__body {
  display: grid;
  grid-gap: 10px; /* отступ между заголовком и описанием */

  position: absolute;
  bottom: 0;
  left: 50%;
  --card__bodyTransform: translateX(-50%);
  transform: var(--card__bodyTransform) translateY(200px);
  opacity: 0;

  padding: 10% 10%;
  width: 100%;

  transition-timing-function: var(--transitionTimingFunction);
  transition-duration: var(--transitionDuration);
  transition-property: opacity, transform;
}

.card__title-body {
}

.card__title-body::before {
  content: var(--title);
}

.card__description {
  font-size: 1em;
}

.card_active .card__hover:hover .card__box-shadow {
  opacity: 1;
}

.card_active .card__hover:hover {
  transform: translateY(calc(var(--paddingCard) * -1));
}

.card_active .card__hover:hover .card__title-previe {
  opacity: 0;
}

.card_active .card__hover:hover .card__body {
  transform: var(--card__bodyTransform) translateY(0px);
  opacity: 1;
}

.card_active .card__hover:hover .card__img > img {
  filter: blur(10px);
}
<div class="card card_active" style="--title: 'Заголовок';">
  <div class="card__padding">
    <div class="card__hover">
      <div class="card__overflow">
        <div class="card__img">
          <img src="https://st2.depositphotos.com/1064024/10769/i/600/depositphotos_107694484-stock-photo-little-prince-illustration.jpg" loading="lazy" alt="">
        </div>
        <div class="card__title-previe card__title"></div>
        <div class="card__body">
          <div class="card__title-body card__title"></div>
          <div class="card__description">
            Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов.
          </div>
        </div>
      </div> <!-- .card__overflow -->
      <div class="card__box-shadow"></div>
    </div> <!-- .card__hover -->
  </div> <!-- .card__padding -->
</div> <!-- .card -->

Карточка без анимации:

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
}

.card {
  display: block;
  user-select: none;

  max-width: 300px; /* можно задать любую ширину/высоту для элемента */
  font-size: 16px;

  --paddingCard: 10px;
  --title: 'Заголовок';
  --transitionTimingFunction: ease;
  --transitionDuration: 0.4s;
}

.card__hover {
  position: relative;
  color: white;
  background: linear-gradient(135deg, black, #3d3d3db0 49%, black 100%);
  
  transition-timing-function: var(--transitionTimingFunction);
  transition-duration: var(--transitionDuration);
  transition-property: transform;
}

.card_active .card__hover {
  cursor: pointer;
}

.card__padding {
  padding: var(--paddingCard);
}

.card__overflow {
  overflow: hidden;
  position: relative;
}

.card__img {
  pointer-events: none;
  overflow: hidden;
  position: relative;
}

.card__img > img {
  transition-timing-function: var(--transitionTimingFunction);
  transition-duration: var(--transitionDuration);
  transition-property: filter;
}

.card__box-shadow {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0px 40px 150px rgba(255, 70, 12, 0.75), 0px 3.67258px 13.8188px rgba(105, 12, 255, 0.317236), 0px 1.57955px 5.94339px rgba(105, 12, 255, 0.219576);
  opacity: 0;

  transition-timing-function: var(--transitionTimingFunction);
  transition-duration: var(--transitionDuration);
  transition-property: opacity;
}

.card__title {
  font-size: 1.75em;
  font-weight: bold;
}

.card__title-previe {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translate(-50%, 0);

  transition-timing-function: var(--transitionTimingFunction);
  transition-duration: var(--transitionDuration);
  transition-property: opacity;
}

.card__title-previe::before {
  content: var(--title);
}

.card__body {
  display: grid;
  grid-gap: 10px; /* отступ между заголовком и описанием */

  position: absolute;
  bottom: 0;
  left: 50%;
  --card__bodyTransform: translateX(-50%);
  transform: var(--card__bodyTransform) translateY(200px);
  opacity: 0;

  padding: 10% 10%;
  width: 100%;

  transition-timing-function: var(--transitionTimingFunction);
  transition-duration: var(--transitionDuration);
  transition-property: opacity, transform;
}

.card__title-body {
}

.card__title-body::before {
  content: var(--title);
}

.card__description {
  font-size: 1em;
}

.card_active .card__hover:hover .card__box-shadow {
  opacity: 1;
}

.card_active .card__hover:hover {
  transform: translateY(calc(var(--paddingCard) * -1));
}

.card_active .card__hover:hover .card__title-previe {
  opacity: 0;
}

.card_active .card__hover:hover .card__body {
  transform: var(--card__bodyTransform) translateY(0px);
  opacity: 1;
}

.card_active .card__hover:hover .card__img > img {
  filter: blur(10px);
}
<div class="card" style="--title: 'Заголовок';">
  <div class="card__padding">
    <div class="card__hover">
      <div class="card__overflow">
        <div class="card__img">
          <img src="https://st2.depositphotos.com/1064024/10769/i/600/depositphotos_107694484-stock-photo-little-prince-illustration.jpg" loading="lazy" alt="">
        </div>
        <div class="card__title-previe card__title"></div>
        <div class="card__body">
          <div class="card__title-body card__title"></div>
          <div class="card__description">
            Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов.
          </div>
        </div>
      </div> <!-- .card__overflow -->
      <div class="card__box-shadow"></div>
    </div> <!-- .card__hover -->
  </div> <!-- .card__padding -->
</div> <!-- .card -->

0

Ваш ответ

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

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