Как запустить animation: через OnMouseOver?

Question

HTML:

<div class="world" onmouseover="this.style.animation-name='a_Down' ">?Hello, World!</div>

CSS:

.world {animation: a_Down 6s ease-in-out .5s}

это вырезка из рабочего (почти) https://codepen.io/oblominsk/pen/KKewqYg

В разных статьях предлагается менять один элемент стиля. А у меня целая анимация. В этом примере я пробовал подставлять ее элементы -- вроде animation-name: или animation-iteration-count: (чтобы она приобрела полный вид). Без animation-name: она работать не будет точно.

Анимация работает, но сама по себе , без внутреннего стиля в div, т.е. без onmouseover=.

Я знаю, то есть :hover , но также есть многочисленные Events , типа

onclick oncontextmenu onmouseover onmouseout onkeydown onkeyup onkeypress ...

Возможностей здесь больше.

В учебниках это вроде бы свойство JS --

 <element onmouseover="myScript">

а animation: -- это же CSS. Как их совместить ?

Answer 1

Можно повесить на класс эту анимацию, и добавлять класс.

function RandomInt(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

let root = document.querySelector(":root");
root.style.setProperty("--random", RandomInt(7, 8));
let rand = getComputedStyle(document.body).getPropertyValue("--random");


let icon = document.querySelector(".icon");
icon.onmouseover = function(event) {
  let target = event.target;
  target.classList.add('world');
};

body {
  font-family: system-ui;
  background: #f06d06;
  color: white;
  text-align: center;
  font-size: 100px;
  overflow: hidden
}

:root {
  --visota: 100vh;
  --visota_menu: 120px;
  --visota_real: calc(var(--visota) - var(--visota_menu));
  --random;
}

@keyframes a_Down {
  from {
    transform-origin: center bottom
  }
  60% {
    transform: perspective(500px) translate3d(0px, var(--visota_real), 0px) rotateX(calc(var(--random, 1)*180deg)) rotateY(calc(var(--random, 1)*360deg)) rotateZ(calc(var(--random, 1)*180deg))
  }
}


/* по классу */

.world {
  animation: a_Down 6s ease-in-out .5s
}

<div class="icon" onmouseover="this.style.animation-name='a_Down' ">?Hello, World!</div>

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

БЛОГ НА HUSL

Как запустить animation: через OnMouseOver?

Ответы (1 шт):