how to make an element in html shake using js

Solutions on MaxInterview for how to make an element in html shake using js by the best coders in the world

showing results for - "how to make an element in html shake using js"

12 Jan 2017

1// HTML
2<!DOCTYPE html>
3<html lang="en">
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <meta http-equiv="X-UA-Compatible" content="ie=edge">
8    <link rel="stylesheet" href="./main.css">
9    <title>3d Vector Kata</title>
10</head>
11<body>
12    <form id="test-form">
13        <input type="text" id="test-input">
14        <button type="submit" id="submit-button">Submit</button>
15    </form>
16    <script src="./index.js"></script>
17</body>
18</html>
19
20// CSS
21/* Standard syntax */
22@keyframes shake {
23  10%, 90% {
24    transform: translate3d(-1px, 0, 0);
25  }
26
27  20%, 80% {
28    transform: translate3d(2px, 0, 0);
29  }
30
31  30%, 50%, 70% {
32    transform: translate3d(-4px, 0, 0);
33  }
34
35  40%, 60% {
36    transform: translate3d(4px, 0, 0);
37  }
38}
39
40.apply-shake {
41    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
42}
43
44
45// JAVASCRIPT
46const input = document.querySelector("input#test-input");
47const submit = document.querySelector("button#submit-button");
48
49submit.addEventListener("click", (e) => {
50    e.preventDefault();
51    if(input.value === "") {
52        input.classList.add("apply-shake");
53    }
54});
55
56input.addEventListener("animationend", (e) => {
57    input.classList.remove("apply-shake");
58});
59
60

source