<div id="container">
  <img id="face" src="https://i.imgur.com/qi8uJO9.png">
  <img id="hour" class="hand" src="https://i.imgur.com/DAoHqmi.png">
  <img id="minute" class="hand" src="https://i.imgur.com/GQ8J45o.png">
  <img id="second" class="hand" src="https://i.imgur.com/elHp6bt.png">
</div>
body {
  margin: 0;
  padding: 0;
  max-width: 400px;
}

#container {
  position: relative;
  overflow: hidden;
}

img {
  max-width: 100%;
  display: block;
}

.hand {
  position: absolute;
  top: 0;
  left: 0;
}

#second {
  -webkit-animation: seconds 60s steps(60, end) infinite;
  animation: seconds 60s steps(60, end) infinite;
}

#minute {
  -webkit-animation: minutes 3600s infinite linear;
  animation: minutes 3600s infinite linear;
}

#hour {
  -webkit-animation: hours 43200s infinite linear;
  animation: hours 43200s infinite linear;
}

//get current time
var date = new Date();
var seconds = date.getSeconds();
var minutes = date.getMinutes();
var hours = date.getHours();
if (hours > 12) {
  hours = hours - 12;
}

//calculate initial rotations
var secondDegs = seconds * 6;
var minuteDegs = minutes * 6 + seconds / 10;
var hourDegs = hours * 30 + minutes / 2 + seconds / 120;

//calculate end rotations
var secondEnd = secondDegs + 360;
var minuteEnd = minuteDegs + 360;
var hourEnd = hourDegs + 360;

//set initial rotations
$("#second").css("transform", "rotate(" + secondDegs + "deg)");
$("#minute").css("transform", "rotate(" + minuteDegs + "deg)");
$("#hour").css("transform", "rotate(" + hourDegs + "deg)");

//create css keyframe animation syntax
var styleHtml =
  '<style type="text/css">' +
  "@-webkit-keyframes seconds {" +
  "0% { transform: rotate(" +
  secondDegs +
  "deg); }" +
  "100% { transform: rotate(" +
  secondEnd +
  "deg); }" +
  "}" +
  "@keyframes seconds {" +
  "0% { transform: rotate(" +
  secondDegs +
  "deg); }" +
  "100% { transform: rotate(" +
  secondEnd +
  "deg); }" +
  "}" +
  "@-webkit-keyframes minutes {" +
  "0% { transform: rotate(" +
  minuteDegs +
  "deg); }" +
  "100% { transform: rotate(" +
  minuteEnd +
  "deg); }" +
  "}" +
  "@keyframes minutes {" +
  "0% { transform: rotate(" +
  minuteDegs +
  "deg); }" +
  "100% { transform: rotate(" +
  minuteEnd +
  "deg); }" +
  "}" +
  "@-webkit-keyframes hours {" +
  "0% { transform: rotate(" +
  hourDegs +
  "deg); }" +
  "100% { transform: rotate(" +
  hourEnd +
  "deg); }" +
  "}" +
  "@keyframes hours {" +
  "0% { transform: rotate(" +
  hourDegs +
  "deg); }" +
  "100% { transform: rotate(" +
  hourEnd +
  "deg); }" +
  "}" +
  "</style>";

//append CSS rules to head
$("head").append(styleHtml);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js