CSS Animation – Best animation effect using CSS clock animation effect using HTML and CSS

Creative CSS Effects | April 25, 2022

Today in this blog you’ll learn how to create clock animation effect. We used HTML and CSS to create this clock animation effect.

Video tutorial of clock animation effect using HTML and CSS

This tutorial video can help you to create clock animation effect using HTML and CSS

clock animation effect using HTML and CSS [Source Codes]

This source code can help you to create clock animation effect using HTML and CSS

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="clock-animation-wrap">
	<div class="clock-animation"></div>
</div>


</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #011f26;
	color: red;
}

.clock-animation-wrap{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	color: red;
}
.clock-animation {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
  border: 10px solid #0095ff;
  background: #001f3a;
  border-radius: 50%;
}
.clock-animation:before, .clock-animation:after {
  position: absolute;
  content: "";
  top: 30px;
  width: 10px;
  background: #0095ff;
  border-radius: 10px;
  transform-origin: center calc(100% - 5px);
  animation: clockAnim 3s infinite linear;
}
.clock-animation::before {
  height: calc(300px / 2 - 30px);
}
.clock-animation::after {
  top: 60px;
  height: calc(300px / 2 - 60px);
  animation-duration: 15s;
}

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