Only HTML and CSS Animation Clock Design

Categories: Uncategorised

CSS Animated Clock – Pure CSS Clock Shape – CSS Animation Effect

Clock UI Design with Animation

Clock Design Using HTML and CSS

Rotating Clock CSS3 Animation | HTML CSS

Animated Wall Clock design using HTML CSS

HTML Code

Create a clock class div and create div for every element which we are going to use.

Below is HTML file Code.

<div class="clock">
	<div class="top"></div>
	<div class="right"></div>
	<div class="bottom"></div>
	<div class="left"></div>
	<div class="center"></div>
	<div class="shadow"></div>
	<div class="hour"></div>
	<div class="minute"></div>
	<div class="second"></div>
</div>

CSS Code

Use absolute CSS property to align clock middle of screen.
Assign proper height and width to clock.


Use top, left, bottom, right for marking 12, 3, 6 and 9 O’clock respectively.


Use a shadow and rotate 135 degree for giving a wall Analog Clock real feel.

Create Hour, Minute and Second clock handles.


Provide animation CSS property to each and use keyframes and rotate handles to 360 degree

Below is CSS file Code. 

.clock {
	position: absolute;
	height: 200px;
	width: 200px;
	background-color: #fff;
	border-radius: 100%;
	border: 10px solid #34626c;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
.clock .top {
	position: absolute;
	width: 3px;
	height: 8px;
	background-color: #262626;
	left: 0;
	right: 0;
	margin: 0 auto;
}
.clock .right {
	position: absolute;
	width: 8px;
	height: 3px;
	background-color: #262626;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}
.clock .bottom {
	position: absolute;
	width: 3px;
	height: 8px;
	background-color: #262626;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
}
.clock .left {
	position: absolute;
	width: 8px;
	height: 3px;
	background-color: #262626;
	top: 0;
	left: 0;
	bottom: 0;
	margin: auto;
}
.clock .center {
	height: 6px;
	width: 6px;
	background-color: #262626;
	border-radius: 100%;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
.clock .shadow {
	background:linear-gradient(rgba(0, 0, 0, 0), 
								rgba(0, 0, 0, 0.1));
	height: 200px;
	width: 200px;
	position: absolute;
	left: 60px;
	top: 60px;
	transform: rotate(135deg);
}
.clock .hour {
	width: 3px;
	height: 100%;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	animation: time 3600s infinite linear;
}
.clock .hour:before {
	content: "";
	height: 60px;
	width: 3px;
	background-color: #262626;
	position: absolute;
	top: 30px;
}

.clock .minute {
	width: 1px;
	height: 100%;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	animation: time 360s infinite linear;
}
.clock .minute:before {
	position: absolute;
	content: "";
	background-color: #262626;
	height: 40px;
	width: 1px;
	top: 50px;
}
.clock .second {
	width: 2px;
	height: 100%;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	animation: time 15s infinite linear;
}
.clock .second:before {
	position: absolute;
	content: "";
	background-color: #fd1111;
	height: 45px;
	width: 2px;
	top: 45px;
}

@keyframes time {
	to {
		transform: rotate(360deg);
	}
}

NOTE : You can use animation time as 86400s for hours, 3600s for minutes and 60s for second to create a real time clock.

Assign these numbers in .second, .minute, .hour classes in from of the “animation” property as following: .second{animation: time 86400s infinite linear;} .minute{animation: time 3600s infinite linear;} .hour{animation: time 60s infinite linear;}

Watch Below Video for Detail Understanding

Search Your Keywords
Recent Post
Post Categories