CSS-Only Countdown Clock

Developer

Size

5,974 Kb

Views

60,720

CSS-Only Countdown Clock Previews
CSS-Only Countdown Clock HTML Codes
CSS-Only Countdown Clock CSS Codes
CSS-Only Countdown Clock JS Codes

How do I make an css-only countdown clock?

A countdown clock that is powered only by CSS. The countdown length is 1 hour and it shows minutes, seconds and the hundredths of seconds as they tick.. What is a css-only countdown clock? How do you make a css-only countdown clock? This script and codes were developed by Yogev Ahuvia on 11 September 2022, Sunday.

CSS-Only Countdown Clock Previews

CSS-Only Countdown Clock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS-Only Countdown Clock</title> <link href='https://fonts.googleapis.com/css?family=Aldrich' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* Play with speed and easing of the animation */
/* =========================================== */
.digit { display: inline-block; font-size: 200px; color: rgba(0, 0, 0, 0.25); height: 180px; line-height: 1;
}
.time-part-wrapper { display: inline-block; margin-right: 50px; position: relative;
}
.time-part-wrapper:not(:last-child):after { content: ":"; display: block; width: 30px; height: 230px; position: absolute; top: 0px; right: -30px; color: rgba(0, 0, 0, 0.25); font-size: 200px; line-height: 0.9;
}
.time-part { width: 140px; text-align: center; height: 180px; overflow: hidden; display: inline-block; margin-left: -5px; box-sizing: border-box;
}
.time-part .digit-wrapper { animation-timing-function: cubic-bezier(1, 0, 1, 0);
}
.time-part.minutes.tens .digit-wrapper { animation-name: minutes-tens; animation-duration: 3600s; animation-iteration-count: 1;
}
.time-part.minutes.ones .digit-wrapper { animation-name: minutes-ones; animation-duration: 600s; animation-iteration-count: 6;
}
.time-part.seconds.tens .digit-wrapper { animation-name: seconds-tens; animation-duration: 60s; animation-iteration-count: 60;
}
.time-part.seconds.ones .digit-wrapper { animation-name: seconds-ones; animation-duration: 10s; animation-iteration-count: 360;
}
.time-part.hundredths.tens .digit-wrapper { animation-name: hundredths-tens; animation-duration: 1s; animation-iteration-count: 3600;
}
.time-part.hundredths.ones .digit-wrapper { animation-name: hundredths-ones; animation-duration: 0.1s; animation-iteration-count: 36000;
}
@keyframes minutes-tens { 0% { transform: translateY(-180px); } 16.66667% { transform: translateY(-360px); } 33.33333% { transform: translateY(-540px); } 50% { transform: translateY(-720px); } 66.66667% { transform: translateY(-900px); } 83.33333% { transform: translateY(-1080px); }
}
@keyframes minutes-ones { 0% { transform: translateY(-180px); } 10% { transform: translateY(-360px); } 20% { transform: translateY(-540px); } 30% { transform: translateY(-720px); } 40% { transform: translateY(-900px); } 50% { transform: translateY(-1080px); } 60% { transform: translateY(-1260px); } 70% { transform: translateY(-1440px); } 80% { transform: translateY(-1620px); } 90% { transform: translateY(-1800px); }
}
@keyframes seconds-tens { 0% { transform: translateY(-180px); } 16.66667% { transform: translateY(-360px); } 33.33333% { transform: translateY(-540px); } 50% { transform: translateY(-720px); } 66.66667% { transform: translateY(-900px); } 83.33333% { transform: translateY(-1080px); }
}
@keyframes seconds-ones { 0% { transform: translateY(-180px); } 10% { transform: translateY(-360px); } 20% { transform: translateY(-540px); } 30% { transform: translateY(-720px); } 40% { transform: translateY(-900px); } 50% { transform: translateY(-1080px); } 60% { transform: translateY(-1260px); } 70% { transform: translateY(-1440px); } 80% { transform: translateY(-1620px); } 90% { transform: translateY(-1800px); }
}
@keyframes hundredths-tens { 0% { transform: translateY(-180px); } 10% { transform: translateY(-360px); } 20% { transform: translateY(-540px); } 30% { transform: translateY(-720px); } 40% { transform: translateY(-900px); } 50% { transform: translateY(-1080px); } 60% { transform: translateY(-1260px); } 70% { transform: translateY(-1440px); } 80% { transform: translateY(-1620px); } 90% { transform: translateY(-1800px); }
}
@keyframes hundredths-ones { 0% { transform: translateY(-180px); } 10% { transform: translateY(-360px); } 20% { transform: translateY(-540px); } 30% { transform: translateY(-720px); } 40% { transform: translateY(-900px); } 50% { transform: translateY(-1080px); } 60% { transform: translateY(-1260px); } 70% { transform: translateY(-1440px); } 80% { transform: translateY(-1620px); } 90% { transform: translateY(-1800px); }
}
body { background: #F1614B; margin: 0; font-family: "Aldrich";
}
.wrapper { margin: 100px auto; width: 1000px; position: relative;
}
.wrapper:before, .wrapper:after { content: ""; display: block; position: absolute; width: 100%; left: 0; height: 20px; z-index: 10;
}
.wrapper:before { top: 0px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YxNjE0YiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2YxNjE0YiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f1614b), color-stop(100%, rgba(241, 97, 75, 0))); background-image: -moz-linear-gradient(top, #f1614b 0%, rgba(241, 97, 75, 0) 100%); background-image: -webkit-linear-gradient(top, #f1614b 0%, rgba(241, 97, 75, 0) 100%); background-image: linear-gradient(to bottom, #f1614b 0%, rgba(241, 97, 75, 0) 100%);
}
.wrapper:after { bottom: 0px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YxNjE0YiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMTYxNGIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(241, 97, 75, 0)), color-stop(100%, #f1614b)); background-image: -moz-linear-gradient(top, rgba(241, 97, 75, 0) 0%, #f1614b 100%); background-image: -webkit-linear-gradient(top, rgba(241, 97, 75, 0) 0%, #f1614b 100%); background-image: linear-gradient(to bottom, rgba(241, 97, 75, 0) 0%, #f1614b 100%);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='wrapper'> <div class='time-part-wrapper'> <div class='time-part minutes tens'> <div class='digit-wrapper'> <span class='digit'>0</span> <span class='digit'>5</span> <span class='digit'>4</span> <span class='digit'>3</span> <span class='digit'>2</span> <span class='digit'>1</span> <span class='digit'>0</span> </div> </div> <div class='time-part minutes ones'> <div class='digit-wrapper'> <span class='digit'>0</span> <span class='digit'>9</span> <span class='digit'>8</span> <span class='digit'>7</span> <span class='digit'>6</span> <span class='digit'>5</span> <span class='digit'>4</span> <span class='digit'>3</span> <span class='digit'>2</span> <span class='digit'>1</span> <span class='digit'>0</span> </div> </div> </div> <div class='time-part-wrapper'> <div class='time-part seconds tens'> <div class='digit-wrapper'> <span class='digit'>0</span> <span class='digit'>5</span> <span class='digit'>4</span> <span class='digit'>3</span> <span class='digit'>2</span> <span class='digit'>1</span> <span class='digit'>0</span> </div> </div> <div class='time-part seconds ones'> <div class='digit-wrapper'> <span class='digit'>0</span> <span class='digit'>9</span> <span class='digit'>8</span> <span class='digit'>7</span> <span class='digit'>6</span> <span class='digit'>5</span> <span class='digit'>4</span> <span class='digit'>3</span> <span class='digit'>2</span> <span class='digit'>1</span> <span class='digit'>0</span> </div> </div> </div> <div class='time-part-wrapper'> <div class='time-part hundredths tens'> <div class='digit-wrapper'> <span class='digit'>0</span> <span class='digit'>9</span> <span class='digit'>8</span> <span class='digit'>7</span> <span class='digit'>6</span> <span class='digit'>5</span> <span class='digit'>4</span> <span class='digit'>3</span> <span class='digit'>2</span> <span class='digit'>1</span> <span class='digit'>0</span> </div> </div> <div class='time-part hundredths ones'> <div class='digit-wrapper'> <span class='digit'>0</span> <span class='digit'>9</span> <span class='digit'>8</span> <span class='digit'>7</span> <span class='digit'>6</span> <span class='digit'>5</span> <span class='digit'>4</span> <span class='digit'>3</span> <span class='digit'>2</span> <span class='digit'>1</span> <span class='digit'>0</span> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CSS-Only Countdown Clock - Script Codes CSS Codes

/* Play with speed and easing of the animation */
/* =========================================== */
.digit { display: inline-block; font-size: 200px; color: rgba(0, 0, 0, 0.25); height: 180px; line-height: 1;
}
.time-part-wrapper { display: inline-block; margin-right: 50px; position: relative;
}
.time-part-wrapper:not(:last-child):after { content: ":"; display: block; width: 30px; height: 230px; position: absolute; top: 0px; right: -30px; color: rgba(0, 0, 0, 0.25); font-size: 200px; line-height: 0.9;
}
.time-part { width: 140px; text-align: center; height: 180px; overflow: hidden; display: inline-block; margin-left: -5px; box-sizing: border-box;
}
.time-part .digit-wrapper { animation-timing-function: cubic-bezier(1, 0, 1, 0);
}
.time-part.minutes.tens .digit-wrapper { animation-name: minutes-tens; animation-duration: 3600s; animation-iteration-count: 1;
}
.time-part.minutes.ones .digit-wrapper { animation-name: minutes-ones; animation-duration: 600s; animation-iteration-count: 6;
}
.time-part.seconds.tens .digit-wrapper { animation-name: seconds-tens; animation-duration: 60s; animation-iteration-count: 60;
}
.time-part.seconds.ones .digit-wrapper { animation-name: seconds-ones; animation-duration: 10s; animation-iteration-count: 360;
}
.time-part.hundredths.tens .digit-wrapper { animation-name: hundredths-tens; animation-duration: 1s; animation-iteration-count: 3600;
}
.time-part.hundredths.ones .digit-wrapper { animation-name: hundredths-ones; animation-duration: 0.1s; animation-iteration-count: 36000;
}
@keyframes minutes-tens { 0% { transform: translateY(-180px); } 16.66667% { transform: translateY(-360px); } 33.33333% { transform: translateY(-540px); } 50% { transform: translateY(-720px); } 66.66667% { transform: translateY(-900px); } 83.33333% { transform: translateY(-1080px); }
}
@keyframes minutes-ones { 0% { transform: translateY(-180px); } 10% { transform: translateY(-360px); } 20% { transform: translateY(-540px); } 30% { transform: translateY(-720px); } 40% { transform: translateY(-900px); } 50% { transform: translateY(-1080px); } 60% { transform: translateY(-1260px); } 70% { transform: translateY(-1440px); } 80% { transform: translateY(-1620px); } 90% { transform: translateY(-1800px); }
}
@keyframes seconds-tens { 0% { transform: translateY(-180px); } 16.66667% { transform: translateY(-360px); } 33.33333% { transform: translateY(-540px); } 50% { transform: translateY(-720px); } 66.66667% { transform: translateY(-900px); } 83.33333% { transform: translateY(-1080px); }
}
@keyframes seconds-ones { 0% { transform: translateY(-180px); } 10% { transform: translateY(-360px); } 20% { transform: translateY(-540px); } 30% { transform: translateY(-720px); } 40% { transform: translateY(-900px); } 50% { transform: translateY(-1080px); } 60% { transform: translateY(-1260px); } 70% { transform: translateY(-1440px); } 80% { transform: translateY(-1620px); } 90% { transform: translateY(-1800px); }
}
@keyframes hundredths-tens { 0% { transform: translateY(-180px); } 10% { transform: translateY(-360px); } 20% { transform: translateY(-540px); } 30% { transform: translateY(-720px); } 40% { transform: translateY(-900px); } 50% { transform: translateY(-1080px); } 60% { transform: translateY(-1260px); } 70% { transform: translateY(-1440px); } 80% { transform: translateY(-1620px); } 90% { transform: translateY(-1800px); }
}
@keyframes hundredths-ones { 0% { transform: translateY(-180px); } 10% { transform: translateY(-360px); } 20% { transform: translateY(-540px); } 30% { transform: translateY(-720px); } 40% { transform: translateY(-900px); } 50% { transform: translateY(-1080px); } 60% { transform: translateY(-1260px); } 70% { transform: translateY(-1440px); } 80% { transform: translateY(-1620px); } 90% { transform: translateY(-1800px); }
}
body { background: #F1614B; margin: 0; font-family: "Aldrich";
}
.wrapper { margin: 100px auto; width: 1000px; position: relative;
}
.wrapper:before, .wrapper:after { content: ""; display: block; position: absolute; width: 100%; left: 0; height: 20px; z-index: 10;
}
.wrapper:before { top: 0px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YxNjE0YiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2YxNjE0YiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f1614b), color-stop(100%, rgba(241, 97, 75, 0))); background-image: -moz-linear-gradient(top, #f1614b 0%, rgba(241, 97, 75, 0) 100%); background-image: -webkit-linear-gradient(top, #f1614b 0%, rgba(241, 97, 75, 0) 100%); background-image: linear-gradient(to bottom, #f1614b 0%, rgba(241, 97, 75, 0) 100%);
}
.wrapper:after { bottom: 0px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YxNjE0YiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMTYxNGIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(241, 97, 75, 0)), color-stop(100%, #f1614b)); background-image: -moz-linear-gradient(top, rgba(241, 97, 75, 0) 0%, #f1614b 100%); background-image: -webkit-linear-gradient(top, rgba(241, 97, 75, 0) 0%, #f1614b 100%); background-image: linear-gradient(to bottom, rgba(241, 97, 75, 0) 0%, #f1614b 100%);
}

CSS-Only Countdown Clock - Script Codes JS Codes

/* CSS-Only Countdown Clock © Yogev Ahuvia * ======================================= * A countdown clock that is powered only * by CSS. The countdown length is 1 hour * and it shows minutes, seconds and the * hundredths of seconds as they tick. */

Home Page	Home
Developer	Yogev Ahuvia
Username	kindofone
Uploaded	September 11, 2022
Rating	4.5
Size	5,974 Kb
Views	60,720

Do you need developer help for CSS-Only Countdown Clock?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Yogev Ahuvia (kindofone) Script Codes

Name	Size
Natural Language Accordion Form	8,426 Kb
Tears Of Happiness	3,667 Kb
3D Cube of 3D Balls	4,507 Kb
Ball Bouncing On Text	5,553 Kb
The CodePen Logo	4,259 Kb
Triangles From Another Dimension	15,606 Kb
A Pen by Yogev Ahuvia	1,941 Kb
Subtle Buttons	4,010 Kb
Live Bricks	7,014 Kb
Playing At Sunset	12,065 Kb

Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
Vanilla modal window	Jasonhowmans	3,554 Kb
Testing Portfolio Page	Sideshowli	3,395 Kb
Starfield using KineticJS	Asp	3,512 Kb
Full page table inside the grid	Twikito	1,864 Kb
Whyutils	LeYvan	3,752 Kb
Personal Logo Animation	Lloydwheeler	3,795 Kb
Login-ng-modal	Heedoo	3,566 Kb
Hc first draft	Stepfray	5,104 Kb
Wrap_Test	Mscfourn	7,503 Kb
Mandelbrot Fractal	_Billy_Brown	2,706 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!