CSS Timer | Pure Css Html timer – Codewithrandom

CSS Timer | Pure Css Html timer – Codewithrandom

Welcome🎉 to Code With Random blog. In this blog, we learn how to create CSS Timer. We use HTML & CSS  for Responsive CSS Tabs. Hope you enjoy our blog so let’s start with a basic HTML structure for the CSS Timer. 

HTML code

 <head>  
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100' rel='stylesheet' type='text/css'>
</head>
<div class="box-counter-container">
<div class="box-counter hours">
<ul class="ten">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul class="unit">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<label>hours</label>
</div>
<div class="box-counter minutes">
<ul class="ten">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul class="unit">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<label>minutes</label>
</div>
<div class="box-counter seconds">
<ul class="ten">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul class="unit">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<label>seconds</label>
</div>
<div class="box-counter one-sixtieth-second">
<ul class="ten">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul class="unit">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<label>1/60 of a sec</label>
</div>
</div>

There is all HTML code for the CSS Timer. Now, you can see output without CSS, then we write CSS for the CSS Timer.

 body { margin-top: 20px; }  
.box-counter-container {
margin: 0 auto;
text-align: center;
width: 680px;
}
.box-counter {
position: relative;
float: left;
margin: 0 10px;
padding: 0;
width: 150px;
height: 120px;
border-radius: 5px;
background: #abcdef;
box-shadow: 5px 5px 0px rgba(0,0,0,0.08);
overflow: hidden;
}
.box-counter:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 5px;
background: rgba(255,255,255,0.2);
box-shadow: inset 0px 0px 50px 10px #ABCDEF;
z-index: 999;
}
.box-counter:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
border-radius: 5px 5px 0px 0px;
background: rgba(255,255,255,0.2);
box-shadow: inset 0px -50px 70px -50px rgba(100,150,180,0.35);
border-bottom: 1px solid rgba(100,150,180,0.22);
z-index: 1000;
}
.box-counter ul {
padding: 0;
margin: 0;
list-style: none;
position: absolute;
top: 0;
width: 50%;
height: 100%;
color: #FFF;
text-align: center;
line-height: 120px;
font-family: Roboto;
font-size: 6em;
text-shadow: 0px 0px 2px rgba(255,255,255,1), 2px 2px 0px rgba(0,0,0,0.08);
}
.unit { right: 0; }
.ten { left: 0; }
.one-sixtieth-second .ten {
-webkit-animation: ten 1s cubic-bezier(1, 0, 0, 1) infinite;
-moz-animation: ten 1s cubic-bezier(1, 0, 0, 1) infinite;
-o-animation: ten 1s cubic-bezier(1, 0, 0, 1) infinite;
animation: ten 1s cubic-bezier(1, 0, 0, 1) infinite;
}
.one-sixtieth-second .unit {
-webkit-animation: unit 0.6s linear infinite;
-moz-animation: unit 0.6s linear infinite;
-o-animation: unit 0.6s linear infinite;
animation: unit 0.6s linear infinite;
}
.seconds .ten {
-webkit-animation: ten 60s cubic-bezier(1, 0, 0, 1) 4.5s infinite;
-moz-animation: ten 60s cubic-bezier(1, 0, 0, 1) 4.5s infinite;
-o-animation: ten 60s cubic-bezier(1, 0, 0, 1) 4.5s infinite;
animation: ten 60s cubic-bezier(1, 0, 0, 1) 4.5s infinite;
}
.seconds .unit {
-webkit-animation: unit 10s cubic-bezier(1, 0, 0, 1) infinite;
-moz-animation: unit 10s cubic-bezier(1, 0, 0, 1) infinite;
-o-animation: unit 10s cubic-bezier(1, 0, 0, 1) infinite;
animation: unit 10s cubic-bezier(1, 0, 0, 1) infinite;
}
.minutes .ten {
-webkit-animation: ten 3600s cubic-bezier(1, 0, 0, 1) infinite;
-moz-animation: ten 3600s cubic-bezier(1, 0, 0, 1) infinite;
-o-animation: ten 3600s cubic-bezier(1, 0, 0, 1) infinite;
animation: ten 3600s cubic-bezier(1, 0, 0, 1) infinite;
}
.minutes .unit {
-webkit-animation: unit 600s cubic-bezier(1, 0, 0, 1) 30s infinite;
-moz-animation: unit 600s cubic-bezier(1, 0, 0, 1) 30s infinite;
-o-animation: unit 600s cubic-bezier(1, 0, 0, 1) 30s infinite;
animation: unit 600s cubic-bezier(1, 0, 0, 1) 30s infinite;
}
.hours .ten {
-webkit-animation: ten 216000s cubic-bezier(1, 0, 0, 1) infinite;
-moz-animation: ten 216000s cubic-bezier(1, 0, 0, 1) infinite;
-o-animation: ten 216000s cubic-bezier(1, 0, 0, 1) infinite;
animation: ten 216000s cubic-bezier(1, 0, 0, 1) infinite;
}
.hours .unit {
-webkit-animation: unit 36000s cubic-bezier(1, 0, 0, 1) 30s infinite;
-moz-animation: unit 36000s cubic-bezier(1, 0, 0, 1) 30s infinite;
-o-animation: unit 36000s cubic-bezier(1, 0, 0, 1) 30s infinite;
animation: unit 36000s cubic-bezier(1, 0, 0, 1) 30s infinite;
}
@-webkit-keyframes unit {
10% { transform: translateY(-120px); }
20% { transform: translateY(-240px); }
30% { transform: translateY(-360px); }
40% { transform: translateY(-480px); }
50% { transform: translateY(-600px); }
60% { transform: translateY(-720px); }
70% { transform: translateY(-840px); }
80% { transform: translateY(-960px); }
90% { transform: translateY(-1080px); }
100% { transform: translateY(-1200px); }
}
@-moz-keyframes unit {
10% { -moz-transform: translateY(-120px); }
20% { -moz-transform: translateY(-240px); }
30% { -moz-transform: translateY(-360px); }
40% { -moz-transform: translateY(-480px); }
50% { -moz-transform: translateY(-600px); }
60% { -moz-transform: translateY(-720px); }
70% { -moz-transform: translateY(-840px); }
80% { -moz-transform: translateY(-960px); }
90% { -moz-transform: translateY(-1080px); }
100% { -moz-transform: translateY(-1200px); }
}
@-o-keyframes unit {
10% { -o-transform: translateY(-120px); }
20% { -o-transform: translateY(-240px); }
30% { -o-transform: translateY(-360px); }
40% { -o-transform: translateY(-480px); }
50% { -o-transform: translateY(-600px); }
60% { -o-transform: translateY(-720px); }
70% { -o-transform: translateY(-840px); }
80% { -o-transform: translateY(-960px); }
90% { -o-transform: translateY(-1080px); }
100% { -o-transform: translateY(-1200px); }
}
@keyframes unit {
10% { transform: translateY(-120px); }
20% { transform: translateY(-240px); }
30% { transform: translateY(-360px); }
40% { transform: translateY(-480px); }
50% { transform: translateY(-600px); }
60% { transform: translateY(-720px); }
70% { transform: translateY(-840px); }
80% { transform: translateY(-960px); }
90% { transform: translateY(-1080px); }
100% { transform: translateY(-1200px); }
}
@-webkit-keyframes ten {
16.666% { -webkit-transform: translateY(-120px); }
33.333% { -webkit-transform: translateY(-240px); }
50% { -webkit-transform: translateY(-360px); }
66.666% { -webkit-transform: translateY(-480px); }
83.333% { -webkit-transform: translateY(-600px); }
100% { -webkit-transform: translateY(-720px); }
}
@-moz-keyframes ten {
16.666% { -webkit-transform: translateY(-120px); }
33.333% { -webkit-transform: translateY(-240px); }
50% { -webkit-transform: translateY(-360px); }
66.666% { -webkit-transform: translateY(-480px); }
83.333% { -webkit-transform: translateY(-600px); }
100% { -webkit-transform: translateY(-720px); }
}
@-o-keyframes ten {
16.666% { -webkit-transform: translateY(-120px); }
33.333% { -webkit-transform: translateY(-240px); }
50% { -webkit-transform: translateY(-360px); }
66.666% { -webkit-transform: translateY(-480px); }
83.333% { -webkit-transform: translateY(-600px); }
100% { -webkit-transform: translateY(-720px); }
}
@keyframes ten {
16.666% { -webkit-transform: translateY(-120px); }
33.333% { -webkit-transform: translateY(-240px); }
50% { -webkit-transform: translateY(-360px); }
66.666% { -webkit-transform: translateY(-480px); }
83.333% { -webkit-transform: translateY(-600px); }
100% { -webkit-transform: translateY(-720px); }
}
label {
position: absolute;
bottom: 3px;
left: 0;
margin: 0;
padding: 0;
width: 150px;
font-size: 75%;
color: rgba(255,255,255,0.6);
text-shadow: 0px 0px 10px rgba(120,170,200,0.5);
z-index: 1001;
}

Now we have completed our CSS section,  Here is our final updated output CSS.

Final Output

Now we have completed our CSS section,  Here is our updated output with CSSHope you like the CSS Timer , you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create CSS Timer  using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

code by – Nazmul Hasan Rupok

Check out more…..

Leave a Reply