|
Сообщение от nastya97core
|
|
А если бы у меня таких 10 моментов
|
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
form.err .anima{
animation:anima 350ms backwards ease-in-out;
color: red;
}
@keyframes anima {
from {transform: translateX(0);}
20% {transform: translateX(1%);}
40% {transform: translateX(-1%);}
60% {transform: translateX(1%);}
80% {transform: translateX(-1%);}
to {transform: translateX(0);}
}
</style>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
let timer;
document.querySelector("button").onclick = function(){
clearTimeout(timer);
document.querySelector("form").classList.remove("err");
timer = setTimeout(()=> document.querySelector("form").classList.add("err"))
}
});
</script>
</head>
<body>
<form action="http://">
<h1 class="anima">Анимация</h1>
<h1 class="anima">Анимация</h1>
<h1 class="anima">Анимация</h1></form>
<button>Жмай</button>
</body>
</html>