JSFiddle - React, Tailwind, and code Playground

by cgough

HTML

<div>
  <h1>Ringing Bell Animation</h1>
  <span class="bell"> K</span>
</div>

CSS

body {
  background: #1b1b1b;
}

h1{
  font-family: tahoma;
  margin-top: 50px;
  font-size: 48px;
  color: #9e9e9e;
  text-align: center;
  font-weight: 200;
}

.bell{
  display:block;
  width: 40px;
  height: 40px;
  font-size: 40px;
  margin:50px auto 0;
  color: #9e9e9e;
  -webkit-animation: ring 4s .7s ease-in-out infinite;
  -webkit-transform-origin: 50% 4px;
  -moz-animation: ring 4s .7s ease-in-out infinite;
  -moz-transform-origin: 50% 4px;
  animation: ring 4s .7s ease-in-out infinite;
  transform-origin: 50% 4px;
}

@-webkit-keyframes ring {
  0% { -webkit-transform: rotate(0); }
  1% { -webkit-transform: rotate(30deg); }
  3% { -webkit-transform: rotate(-28deg); }
  5% { -webkit-transform: rotate(34deg); }
  7% { -webkit-transform: rotate(-32deg); }
  9% { -webkit-transform: rotate(30deg); }
  11% { -webkit-transform: rotate(-28deg); }
  13% { -webkit-transform: rotate(26deg); }
  15% { -webkit-transform: rotate(-24deg); }
  17% { -webkit-transform: rotate(22deg); }
  19% { -webkit-transform: rotate(-20deg); }
  21% { -webkit-transform: rotate(18deg); }
  23% { -webkit-transform: rotate(-16deg); }
  25% { -webkit-transform: rotate(14deg); }
  27% { -webkit-transform: rotate(-12deg); }
  29% { -webkit-transform: rotate(10deg); }
  31% { -webkit-transform: rotate(-8deg); }
  33% { -webkit-transform: rotate(6deg); }
  35% { -webkit-transform: rotate(-4deg); }
  37% { -webkit-transform: rotate(2deg); }
  39% { -webkit-transform: rotate(1deg); }

  43% { -webkit-transform: rotate(0); }
  100% { -webkit-transform: rotate(0); }
}

@-moz-keyframes ring {
  0% { -moz-transform: rotate(0); }
  1% { -moz-transform: rotate(30deg); }
  3% { -moz-transform: rotate(-28deg); }
  5% { -moz-transform: rotate(34deg); }
  7% { -moz-transform: rotate(-32deg); }
  9% { -moz-transform: rotate(30deg); }
  11% { -moz-transform: rotate(-28deg); }
  13% { -moz-transform: rotate(26deg); }
  15% { -moz-transform: rotate(-24deg); }
  17% { -moz-transform: rotate(22deg); }
  19% {...