Posted on: 11.09.2020 Posted by: Alex D Comments: 0

Use CSS library Animate

How do I animate an element?

  1. 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>
Categories:

Leave a Comment