преобразовать уже масштабированный элемент - PullRequest
Новая
       8

преобразовать уже масштабированный элемент

0 голосов
/ 01 июля 2019

Я пытаюсь масштабировать уже масштабированный элемент при наведении.

Сначала я запускаю анимацию 

animation-name: image-animation;
animation-delay: 1s;
animation-duration: 1s;
animation-fill-mode: forward;
animation-timing-function: ease-out;

@keyframes image-animation {
  to {
      top: -28%;
      transform: scale(.7);
      }
  }

Затем я хочу масштабировать тот же элемент при наведении: 

:hover {
transform: scale(1.1)
}

Преобразование в :hover Действие работает довольно хорошо, если элемент не был преобразован ранее (см. Исходную анимацию «image-animation»), но не работает в случае, описанном выше.

Возможно ли иметь начальную анимацию с transform: scale(...), исправить параметр масштаба и затем применить `` transform: scale (...) `при наведении курсора?

1 Ответ

0 голосов
/ 09 июля 2019

Да, это возможно. Причина, по которой он не работает, заключается в том, что вы не можете изменить свойство, которое анимируется при наведении.

Чтобы сохранить шкалу на уровне 0,7: IDK, если это опечатка или ошибка, но она должна быть 

animation-fill-mode: forwards;

(вам не хватает 's')

Чтобы применить 'transform: scale (...)' при наведении курсора: вам просто нужно добавить 'animation: 0;' to: hover: 

html, body {
  margin: 0;
}

.container {
  margin: 0;
  padding: 0;
  width: 800px;
  height: 800px;
  animation-name: image-animation;
  animation-delay: 1s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  transform-origin: top center;
  background: green;
}
@keyframes image-animation {
  to {
    transform: scale(0.7);
  }
}

.container:hover{
  animation: 0;
  transform: scale(1.1);
}
<div class="container">
</div>

Однако ваш масштаб по-прежнему основан на исходном размере, и анимация перезапускается после того, как вы наведите курсор мыши, так как свойство анимации изменяется.

Кроме того, у вас не может быть перехода и анимации в одном и том же свойстве, поэтому, если вы хотите, чтобы оно было более плавным, это должны быть две разные анимации.

Но даже если вы это сделаете, поскольку ваша первая анимация имеет задержку, после наведения она переходит от масштаба (1.1) к масштабу (1), ждет 1 с, а затем снова запускает анимацию. Выглядит лучше без задержки imo, но если вам нужна задержка только при первом запуске анимации, есть варианты, но мне нужно больше подробностей по остальной части кода, чтобы найти подходящее решение.

РЕДАКТИРОВАТЬ: в зависимости от ваших потребностей, вы могли бы иметь: после масштабирования элемента, но это будет только масштабировать цвет. Если у этого div есть дочерние элементы, вы можете добавить еще один, который будет содержать те элементы, для которых вы можете использовать transform (scale) и transition. 

html, body {
  margin: 0;
}

.container {
  margin: 0;
  padding: 0;
  width: 800px;
  height: 800px;
  animation-name: image-animation;
  animation-delay: 1s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  transform-origin: top center;
}
@keyframes image-animation {
  to {
    transform: scale(0.7);
  }
}
.content {
  width: 800px;
  height: 800px;
  background-color: green;
  transition: 0.5s all ease-in;
  transform-origin: top center;
}
.content:hover {
  transform: scale(1.1);
}
<div class="container">
  <div class="content">
    some text
  </div>
</div>
...