JSFiddle - React, Tailwind, and code Playground

Examples of hover animations with css and javascript.

by Travis Almand

HTML

<div class="box"></div>
<div class="box animated tada"></div>
<div class="box animated tada-hover"></div>
<div id="js_example" class="box"></div>

SCSS

.box {
  background-color: rebeccapurple;
  cursor: pointer;
  display: inline-block;
  height: 100px;
  margin: 20px;
  width: 100px;
}

// https://daneden.github.io/animate.css/
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.tada,
.tada-hover:hover {
  animation-name: tada;
}
@keyframes tada {
  from {
    transform: scale3d(1, 1, 1);
  }

  10%,20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,50%,70%,90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,60%,80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

JavaScript

let js_example = document.querySelector('#js_example');

js_example.addEventListener('mouseover', function () {
	this.classList.add('animated', 'tada');
});
js_example.addEventListener('mouseout', function () {
	this.classList.remove('animated', 'tada');
});