HTML & CSS Clock Animation

To learn how to create the CSS Clock Animation follow the steps below and watch the video tutorial.

Demo:

Step1.

Add HTML

<div class="clock">
  <div class="face"></div>
  <div class="hr"></div>
  <div class="hrTwo"></div>
  <div class="hands"></div>
  <div class="seconds"></div>
  <div class="parts"></div>
  <div class="top"></div>
  <div class="bell"></div>
  <div class="shadow"></div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.clock {
  position: relative;
  width: 350px;
  height: 350px;
  background-color: #94d2bd;
  overflow: hidden;
}

Style the clock:

.face {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 20px solid #bb3e03;
  background-color: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index:5;
}

.face:before, .face:after {
  content:"";
  position: absolute;
  background-color: #001219;
  border-radius:3px;
}

.face:before {
  width: 10px;
  height:20px;
  left: 50%;
  transform: translate(-50%,-50%);
  top:15px;
  box-shadow: 0 150px #001219;
}

.face:after {
  width: 20px;
  height:10px;
  top: 50%;
  transform: translate(-50%,-50%);
  left:15px;
  box-shadow: 150px 0 #001219;
}

.hr, .hrTwo {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index:5;
}

.hr:before, .hr:after, .hrTwo:before, .hrTwo:after {
  content:"";
  position: absolute;
  background-color: #ced4da;
  border-radius:3px;
  width: 5px;
  height:20px;
}

.hr:before {
  left: 70%;
  transform: translate(-50%,-50%);
  top:16px;
  box-shadow: 0 150px #ced4da;
  transform: rotate(30deg);
}

.hr:after {
  left: 85%;
  transform: translate(-50%,-50%);
  top:41px;
  box-shadow: 0 150px #ced4da;
  transform: rotate(60deg);
}

.hrTwo:before {
  left: 28%;
  transform: translate(-50%,-50%);
  top:14px;
  box-shadow: 0 150px #ced4da;
  transform: rotate(-30deg);
}

.hrTwo:after {
  left: 13%;
  transform: translate(-50%,-50%);
  top:39px;
  box-shadow: 0 150px #ced4da;
  transform: rotate(-60deg);
}

.hands {
  position: absolute;
  z-index:7;
  width: 45px;
  height: 8px;
  background-color: #001219;
  left:130px;
  top:171px;
  border-radius: 5px 0 0 5px;
}

.hands:before {
  position: absolute;
  content:"";
  background-color: #001219;
  width: 60px;
  height: 7px;
  left:40px;
  top:13.5px;
  transform: rotate(25deg);
  border-radius: 0 5px 5px 0;
}

.seconds {
  position: absolute;
  width: 180px;
  height: 180px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index:9;
}

.seconds:before {
  content:"";
  position: absolute;
  background-color: #ae2012;
  width:4px;
  height: 75px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  transform-origin: top;
}

.seconds:after {
  content:"";
  position: absolute;
  border-radius:50%;
  background-color: #ced4da;
  width: 17px;
  height: 17px;
  border: 5px solid #adb5bd;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.parts {
  position: absolute;
  z-index:2;
  background-color: #001219;
  width: 10px;
  height: 30px;
  left:170px;
  top:40px;
}

.parts:before, .parts:after {
  content:"";
  position: absolute;
  background-color: #001219;
  width: 15px;
  height: 35px;
  border-radius: 0 0 10px 10px;
  top:215px;
}

.parts:before {
  left:-60px;
  transform: rotate(20deg);
}

.parts:after {
  left: 60px;
  transform: rotate(-20deg);
}

.top {
  position: absolute;
  background-color: #bb3e03;
  width: 25px;
  height: 10px;
  border-radius:3px;
  top:40px;
  left:162px;
  z-index:3;
}

.top:before, .top:after {
  content:"";
  position: absolute;
  background-color: #001219;
  width: 12px;
  height: 55px;
  border-radius: 10px 10px 0 0;
  top:-10px;
}

.top:before {
  left:-45px;
  transform: rotate(-25deg);
}

.top:after {
  left:55px;
  transform: rotate(25deg);
}

.bell {
  position: absolute;
  z-index:4;
}

.bell:before, .bell:after {
  content:"";
  position: absolute;
  background-color: #bb3e03;
  width: 60px;
  height: 25px;
  border-radius: 20px 20px 0 0;
  top:-178px;
}

.bell:before {
  left:91px;
  transform: rotate(-25deg);
}

.bell:after {
  left:196px;
  transform: rotate(25deg);
}

Animate the second hand using the CSS steps() Function:

Add on the end of the .seconds:before the following properties:

animation: sec 60s infinite;
animation-timing-function: steps(60,end);

and @keyframes:

@keyframes sec {
  from {transform: rotate(0);}
  to {transform: rotate(360deg);}
}

Add the shadow:

.clock:before, .clock:after {
  content:"";
  position: absolute;
  
}

.clock:before {
  width:280px;
  height: 305px;
  top:60px;
  left: 75px;
  transform: skew(40deg, -13.5deg);
  background-color: #6f9487;
}

.clock:after {
  background-color: #94d2bd;
  width:300px;
  height:300px;
  transform: rotate(-65deg) skew(-5deg);
  left:-110px;
  top:-65px;
}

.shadow {
  position: absolute;  
}

.shadow:before, .shadow:after {
  content:"";
  position: absolute;
  height: 0;
  z-index:1;
  border-right: 45px solid transparent;
  top:-170px;
}

.shadow:before {
  border-bottom: 50px solid #6f9487;
  left:177px;
  width:10px;
}

.shadow:after {
  border-bottom: 50px solid #6f9487;
  left:130px;
  width:20px;
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS & JavaScript Digital Clock

What time is it? – CSS Analog Clock Animation

Countdown Timer