css

1
2
3
4
5
6
7
8
9
.hop {
    animation: hop 0.3s ease-out;
}

@keyframes hop {
    0% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}

javascript

1
2
3
4
5
6
7
8
9
const img = document.getElementById("hoppin");

img.addEventListener("click", () => {
    img.classList.add("hop");

    setTimeout(() => {
        img.classList.remove("hop");
    }, 300);
});

html

<img src=image.png id="hoppin">
Edit

Pub: 22 Mar 2025 15:40 UTC

Views: 21