CSS Преобразование при наведении на анимирующий элемент - PullRequest
Новая
       51

CSS Преобразование при наведении на анимирующий элемент

1 голос
/ 14 марта 2020

Я пытаюсь выполнить простое преобразование CSS на :hover - что обычно является простой задачей, но я пытаюсь сделать это на элементе анимации div. Элемент бесконечно анимируется по оси Y с помощью простой CSS анимации с использованием @keyframes{}, но когда я пытаюсь навести курсор на элемент, ничего не происходит.

Я могу получить его до kind работы, если я использую !important для кода наведения, но преобразование / масштабирование происходит мгновенно вместо использования свойства 300ms transition, которое я применил к классу .box.

Я упустить что-то очевидное, или это невозможно? По сути, я просто хочу, чтобы элемент масштабировался при наведении, используя эффект transition и время, но затем возобновлял свою оригинальную анимацию, когда не завис. Спасибо 

.box {
  width: 50%;
  border: solid 3px #555;
  animation: box-move 1s infinite alternate-reverse;
  transition: transform 300ms;
}

.box:hover {
  transform: scale(1.2);
}

@keyframes box-move {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-5px);
  }
}
<div class="box">I'm a box. I move up and down, but I don't scale nicely when hovered like I should :(</div>

Ответы [ 3 ]

1 голос
/ 14 марта 2020

Рассмотрим другую обертку: 

.box {
  width: 50%;
  animation: box-move 1s infinite alternate-reverse;
}
.box> div {
  border: solid 3px #555;
  transition: transform 300ms;
  transform-origin:top left;
}

.box:hover > div {
  transform: scale(1.2);
}

@keyframes box-move {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-5px);
  }
}
<div class="box"><div>I'm a box. I move up and down, but I don't scale nicely when hovered like I should :(</div></div>
1 голос
/ 14 марта 2020

Поскольку вы используете свойство transform при наведении курсора и анимации одновременно. Попробуйте это. 

.box {
  width: 50%;
  border: solid 3px #555;
  animation: box-move 1s infinite alternate-reverse;
  transition: transform 300ms;
}

.box:hover {
  animation: box-move-anim 1s infinite alternate-reverse;
}

@keyframes box-move {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-5px);
  }
}
@keyframes box-move-anim {
  0% {
    transform: translateY(0) scale(1);
  }
  100% {
    transform: translateY(-5px) scale(1.2);
  }
}
0 голосов
/ 14 марта 2020

Хорошо, так что благодаря вашим умным и полезным советам мне удалось найти удовлетворительное решение. Ключом для меня было использование свойства animation-direction, установленного на forwards на :hover. Я не могу действительно объяснить, почему это работает, но все, что я знаю, это не работает должным образом без него.

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

Еще раз спасибо. 

.box {
  width: 50%;
  margin: 1em auto 0 auto;
  border: solid 3px #555;
  cursor: pointer;
  animation: box-move 1s infinite alternate-reverse;
}

.box:hover {
  animation: box-move-anim 300ms 1 forwards;
}

@keyframes box-move {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-5px);
  }
}

@keyframes box-move-anim {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
<div class="box">I'm a box that animates up and down, but I now smoothly scale when hovered :)</div>
...