Use CSS library Animate
How do I animate an element?
- Connect CSS library Animate with cloudflare.com.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
2. Add an element with two classes animate__animated and animate__bounce.
<h3 class="animate__animated animate__bounce">An animated element! By default use these properties: animate-duration:2s; delay-0s</h3>
You can use other animation classes instead of animate__bounce. For example animate__flash or animate__pulse or animate__rubberBand or animate__shakeX or animate__shakeY.
<h3 class="animate__animated animate__flash">An animated animate__flash element</h3>
All variants of animation classes can be found on the official website animate.style
How do I change the speed, delay, and repeat of an animation?
Change animation speed. Use parameter animation-duration: 6s;.
<STYLE> .my-element { animation-duration: 6s; } </STYLE> <h3 class="my-element animate__animated animate__bounce">An animated element! Now propertie: animate-duration:6s; delay-0s</h3>
Set animation delay in seconds. Use class animate__delay-2s, animate__delay-3s, animate__delay-4s, animate__delay-5s.
<h3 class="animate__animated animate__bounce animate__delay-5s">An animated element! animate-duration: 2s; delay-5s</h3>
You can repeat the animation. Use class animate__repeat-1, animate__repeat-2, animate__repeat-3, animate__infinite.
<h3 class="animate__animated animate__bounce animate__delay-5s animate__repeat-3">An animated element! animate-duration: 2s; delay-5s; animate__repeat-3</h3> <h3 class="animate__animated animate__bounce animate__delay-5s animate__infinite">An animated element! animate-duration: 2s; delay-5s; animate__infinite</h3>
How do I animate on hover and click?
You must add class animate__animated and animate__bounce for mouse events onClick and onMouseMove.
Use this JS code to add classes.
document.querySelector("#id-1").classList.add("animate__animated","animate__bounce");
Now use this code on the element event.
<h3 id='id-1' onClick='document.querySelector("#id-1").classList.add("animate__animated","animate__bounce");'>An animated element!. Please click.</h3> <h3 id='id-2' onMouseMove='document.querySelector("#id-2").classList.add("animate__animated","animate__bounce");'>An animated element!. Please hover your mouse.</h3>
But the animation doesn’t repeat itself. You must remove animation classes “animate__animated”,”animate__bounce”. And add them again.
Use this JS code.
const id = '#id-3'; const el=document.querySelector(id); el.classList.add("animate__animated","animate__bounce"); el.addEventListener("animationend", () => { el.classList.remove("animate__animated","animate__bounce"); });
Full HTML code.
<SCRIPT> function addAnim(id) { const el=document.querySelector(id); el.classList.add("animate__animated","animate__bounce"); el.addEventListener("animationend", () => { el.classList.remove("animate__animated","animate__bounce"); }); } </SCRIPT> <h3 id='id-3' onClick='addAnim("#id-3");'>An animated element! Please click.</h3> <h3 id='id-4' onMouseMove='addAnim("#id-4");'>An animated element! Please hover your mouse.</h3>