<div class="orange box" data-anijs="if: mouseover, do: swing animated"></div>
<div class="pink box" data-anijs="if: click, do: tada animated"></div>
<div class="red box" data-anijs="if: dblclick, do: rubberBand animated"></div>
<div class="purple box" data-anijs="if: mousemove, do: shake animated"></div>
<div class="black box" data-anijs="if: mouseover, on: body div.green, do: flash animated"></div>
<div class="green box" data-anijs="if: mouseover, on: div.brown, do: fadeIn animated"></div>
<div class="yellow box" data-anijs="if: dblclick, on: body, do: bounce animated"></div>
<div class="brown box" data-anijs="if: click, on: div, do: wobble animated"></div>
body {
  margin: 80px auto;
  width: 600px;
  border: 2px solid black;
  text-align: center;
  padding: 50px 0;
}

.box {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background: black;
  display: inline-block;
  margin: 10px;
}

.orange {
  background: orange;
}

.pink {
  background: pink;
}

.red {
  background: red;
}

.purple {
  background: purple;
}

.black {
  background: black;
}

.green {
  background: green;
}

.yellow {
  background: yellow;
}

.brown {
  background: brown;
}

External CSS

  1. https://anijs.github.io/lib/anicollection/anicollection.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://anijs.github.io/lib/anijs/anijs-min.js
  3. https://anijs.github.io/lib/anijs/helpers/dom/anijs-helper-dom-min.js