nastya97core,
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.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() {
document.querySelector("button").onclick = function(){
document.querySelector("h1").classList.remove("anima");
document.documentElement.clientWidth;
document.querySelector("h1").classList.add("anima");
}
});
</script>
</head>
<body>
<h1>Анимация</h1>
<button>Жмай</button>
</body>
</html>