JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<div class="the-bell">
</div>

<p>
↑ pretend this is a bell. 
</p>

<button onclick="ring()">
ring me, baby.
</button>

CSS

@keyframes ring {
  0% {transform: rotate(0deg)}
  20% {transform: rotate(-15deg)}
  40% {transform: rotate(10deg)}
  60% {transform: rotate(-8deg)}
  80% {transform: rotate(5deg)}
  100% {transform: rotate(0deg)}
}

.ring {
  animation: ring .5s;
}





/* Ignore this stuff down here */



body {
  text-align: center;
  padding: 60px;
}

.the-bell {
  width: 20px;
  height: 25px;
  border: 2px solid #222;
  border-radius: 20px 20px 0 0;
  margin: 0 auto;
}

button {
  margin: 40px 0;
}

JavaScript

// just for the demo

var bell = document.querySelector('.the-bell');

function ring(){
	bell.classList.add('ring');
  setTimeout(function(){
  	bell.classList.remove('ring');
  }, 500);
}