<div id="clock">
  <div id="hours"></div>
  <div id="minutes"></div>
  <div id="seconds"></div>
</div>

<h1>Pure CSS Animated Clock</h1>

$color: #B0DAB9; 
$color-bg: lighten($color, 15);
$size: 225px;

@import url(https://fonts.googleapis.com/css?family=Pacifico);

html {
  width: 100%;
  height: 100%;
  padding: 5% 0; 
  background: linear-gradient($color-bg, #FFF);
}

h1 {
  margin: 0;
  font: 3em 'Pacifico', cursive;
  text-align: center;
  text-shadow: 0 2px 0 #fff;
  color: $color;
}

#clock {
  box-sizing: border-box;
  width: $size;
  height: $size;
  border: 35px solid $color;;
  border-radius: 50%;
  margin: 0 auto;
  transform: rotate(-90deg);
  
  &:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    background: black;
    border: 12px solid $color;
    border-radius: 50%;
    transform: translate(-50%,-50%);
  }
}

#hours, #minutes, #seconds{
  position: absolute;
  top: 0; 
  right: 0; 
  bottom: 0;
  left: 0;
  
  &:after, &:after, &:after {
    content: "";
    display: block;
    margin: 50% 50%;
    width: 50%;
    transform-origin: left top;
    animation: clock linear infinite;
  }
}

#hours:after {
  width: 30%;
  outline: 8px solid $color;
  animation-duration: 86400s;
}

#minutes:after {
  width: 40%;
  outline: 4px solid $color;
  animation-duration: 3600s;
}

#seconds:after {
  width: 48%;
  outline: 2px solid $color;
  animation-duration: 60s;
}

@keyframes clock {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*
 * (almost) Pure Animated CSS Clock
 *
 * Need standard CSS?
 *
 * Click the Eye icon at the top right
 * corner of the CSS panel in order to 
 * copy/paste the compiled CSS.
 *
 * Jay S.
 * www.jaysalvat.com
 */

/* Javacript to set the time once */

set('hours',   30 * new Date().getHours());
set('minutes',  6 * new Date().getMinutes());
set('seconds', 10 * new Date().getSeconds());

function set(id, deg) {
  var el = document.getElementById(id),
      rotation = 'rotate(' + deg + 'deg)';
  
  el.style.transform = rotation;
  el.style.webkitTransform = rotation;
}