Как сделать такую анимацию?

Question

[Ahtun_lv]

Как сделать такую анимацию кнопки?

Answer 1

[Dino Winchester]

На самом деле не совсем понятно, когда запускается анимация? Если после нажатия на кнопку или после события сhange, тогда можно сделать например так:

.is-active {
     animation-name: shake;
     animation-direction: alternate;
     animation-duration: 1s;
     animation-iteration-count: 4;
}

@keyframes shake {
     from {
          transform: translateX(0px);
     }
     to {
          transform: translateX(150px);
     }
}

const button = document.querySelector(".button");

button.classList.add("is-active");

button.addEventListener("animationend", (event) => {
     event.stopPropagation();
     button.classList.remove("is-active");
}, { once: true });

То есть добавить активный класс кнопке, а после окончания анимации удалить добавленный класс.

Или кнопка "убегает" от курсора в каком-то определенном направлении?

Answer 2

[Кирилл]

.button {
  transition: 400ms;
}

.button:hover {
  transform: translateX(200px);
}

Дальше уже через JS подставлять свои классы для того, чтобы кнопка не всегда убегала.

Comments

[Dino Winchester]

Кирилл, :hover отличный инструмент и очень часто выручает, но не в этом случае.



Наведите мышкой с левой стороны на кнопку, и водите туда сюда, вдоль места где по дефолту стоит кнопка.

Эффект конечно неприятный. Кнопка дрожит как листва на осеннем ветру, но это поправимо, средствами CSS(полностью или частично), правда всё равно :hover - это не то что всегда поможет в подобных ситуациях.

Дальше уже через JS подставлять свои классы для того, чтобы кнопка не всегда убегала.

А вот это уже хорошая идея.