@Ahtun_lv

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

Как сделать такую анимацию кнопки?
63405794e6879565630528.gif
  • Вопрос задан
  • 149 просмотров
Решения вопроса 2
mizutsune
@mizutsune
Frontend Developer
На самом деле не совсем понятно, когда запускается анимация? Если после нажатия на кнопку или после события с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 });


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

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

Ответ написан
Комментировать
@KhokhlovKirill
.button {
  transition: 400ms;
}

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


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы