animated clock

clock.html

<div class="clock">
  <div class="min_hand"></div>
  <div class="center"></div>
  <div class="hour_hand"></div>
</div>

clock.js

// fire animation when the fire class is added
var clock = document.querySelector('.clock');
clock.addEventListener('click', function(e) {
  e.currentTarget.classList.toggle('fire');
});

clock.scss

$stroke: 10px;
$hand-stroke: 6px;
$clock-color: black;
.clock {
  border-radius: 50%;
  height: 200px;
  width: 200px;
  border: $stroke solid $clock-color;
  position: relative;
  .center {
    width: #{$hand-stroke};
    height: #{$hand-stroke};
    background: $clock-color;
    border-radius: 50%;
    margin: 0 auto;
    position: absolute;
    top: calc(50% - (#{$hand-stroke} / 2));
    left: calc(50% - (#{$hand-stroke} / 2));
  }
  .min_hand,
  .hour_hand {
    background: $clock-color;
    position: absolute;
    height: 48%;
    left: calc(50% - 3px);
    top: calc(50% - 48%);
    border-radius: 50% 50% 0 0;
    width: $hand-stroke;
    transform-origin: center bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  .hour_hand {
    height: 30%;
    top: calc(50% - 30%);
  }
}
.fire {
  .hour_hand {
    -webkit-animation: hand 30s infinite linear;
    animation: hand 30s infinite linear;
  }
  .min_hand {
    -webkit-animation: hand 5s infinite linear;
    animation: hand 5s infinite linear;
  }
}

@-webkit-keyframes hand {
  0% {
    -webkit-transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes hand {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}