
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