CSS Timer
How do I make an css timer?
Inspired by a retweet from codepen about this pen: http://codepen.io/lrsbck/pen/bpjcgFairly different things but similar fundamental concept. CSS Animation durations to present dynamic seconds minutes and hours.. What is a css timer? How do you make a css timer? This script and codes were developed by Keith Wyland on 13 September 2022, Tuesday.
CSS Timer - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Timer</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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! */ @import url(https://fonts.googleapis.com/css?family=Poiret+One);
body { margin: 0 auto; width: 90%; text-align: center; padding-top: 1em; background: #222;
}
ol { background-color: black; display: inline-block; list-style: none; text-align: center; margin: 0 auto; padding: 0 0.5em; height: 6em; overflow: hidden; min-width: 590px; border-style: solid; border-color: black; border-width: 20px 10px;
}
li { float: left; padding: 0 0.5em; background-color: #333; margin: 0 0.5em; font-family: Poiret One, monospace; color: #ddd;
}
div { float: left; position: relative; animation-timing-function: linear; animation-iteration-count: infinite;
}
span { display: block; font-size: 6em; line-height: 1em;
}
.sec .one { animation-name: one-step-sec; animation-duration: 10s;
}
.sec .ten { animation-name: ten-step-sec; animation-duration: 60s;
}
.min .one { animation-name: one-step-min; animation-duration: 600s;
}
.min .ten { animation-name: ten-step-min; animation-duration: 3600s;
}
.hour .one { animation-name: one-step-hour; animation-duration: 36000s;
}
.hour .ten { animation-name: ten-step-hour; animation-duration: 360000s;
}
@keyframes one-step-sec { from { top: 0; } to { top: -60em; }
}
@keyframes ten-step-sec { 15% { top: 0; } 16.66666666666667%, 31.66666666666667% { top: -6em;} 33.33333333333334%, 48.33333333333333% { top: -12em;} 50%, 65% { top: -18em;} 66.66666666666668%, 81.66666666666667% { top: -24em;} 83.33333333333335%, 98.33333333333333% { top: -30em;} 100% { top: -36em;}
}
@keyframes one-step-min { 9.83% { top: 0; } 10%, 19.83% { top: -6em;} 20%, 29.83% { top: -12em;} 30%, 39.83% { top: -18em;} 40%, 49.83% { top: -24em;} 50%, 59.83% { top: -30em;} 60%, 69.83% { top: -36em;} 70%, 79.83% { top: -42em;} 80%, 89.83% { top: -48em;} 90%, 99.83% { top: -54em;} 100% { top: -60em;}
}
@keyframes ten-step-min { 16.6383% { top: 0; } 16.66666666666667%, 33.30496% { top: -6em;} 33.33333333333334%, 49.97163% { top: -12em;} 50%, 66.638296% { top: -18em;} 66.66666666666668%, 83.30496% { top: -24em;} 83.33333333333335%, 99.97163% { top: -30em;} 100% { top: -36em;}
}
@keyframes one-step-hour { 9.83% { top: 0; } 10%, 19.83% { top: -6em;} 20%, 29.83% { top: -12em;} 30%, 39.83% { top: -18em;} 40%, 49.83% { top: -24em;} 50%, 59.83% { top: -30em;} 60%, 69.83% { top: -36em;} 70%, 79.83% { top: -42em;} 80%, 89.83% { top: -48em;} 90%, 99.83% { top: -54em;} 100% { top: -60em;}
}
@keyframes ten-step-hour { 9.83% { top: 0; } 10%, 19.83% { top: -6em;} 20%, 29.83% { top: -12em;} 30%, 39.83% { top: -18em;} 40%, 49.83% { top: -24em;} 50%, 59.83% { top: -30em;} 60%, 69.83% { top: -36em;} 70%, 79.83% { top: -42em;} 80%, 89.83% { top: -48em;} 90%, 99.83% { top: -54em;} 100% { top: -60em;}
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <ol class="clock"> <li class="hour"> <div class="ten"> <span>0</span> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>8</span> <span>9</span> <span>0</span> </div> <div class="one"> <span>0</span> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>8</span> <span>9</span> <span>0</span> </div> </li> <li class="min"> <div class="ten"> <span>0</span> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>0</span> </div> <div class="one"> <span>0</span> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>8</span> <span>9</span> <span>0</span> </div> </li> <li class="sec"> <div class="ten"> <span>0</span> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>0</span> </div> <div class="one"> <span>0</span> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>8</span> <span>9</span> <span>0</span> </div> </li>
</ol> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
CSS Timer - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Poiret+One);
body { margin: 0 auto; width: 90%; text-align: center; padding-top: 1em; background: #222;
}
ol { background-color: black; display: inline-block; list-style: none; text-align: center; margin: 0 auto; padding: 0 0.5em; height: 6em; overflow: hidden; min-width: 590px; border-style: solid; border-color: black; border-width: 20px 10px;
}
li { float: left; padding: 0 0.5em; background-color: #333; margin: 0 0.5em; font-family: Poiret One, monospace; color: #ddd;
}
div { float: left; position: relative; animation-timing-function: linear; animation-iteration-count: infinite;
}
span { display: block; font-size: 6em; line-height: 1em;
}
.sec .one { animation-name: one-step-sec; animation-duration: 10s;
}
.sec .ten { animation-name: ten-step-sec; animation-duration: 60s;
}
.min .one { animation-name: one-step-min; animation-duration: 600s;
}
.min .ten { animation-name: ten-step-min; animation-duration: 3600s;
}
.hour .one { animation-name: one-step-hour; animation-duration: 36000s;
}
.hour .ten { animation-name: ten-step-hour; animation-duration: 360000s;
}
@keyframes one-step-sec { from { top: 0; } to { top: -60em; }
}
@keyframes ten-step-sec { 15% { top: 0; } 16.66666666666667%, 31.66666666666667% { top: -6em;} 33.33333333333334%, 48.33333333333333% { top: -12em;} 50%, 65% { top: -18em;} 66.66666666666668%, 81.66666666666667% { top: -24em;} 83.33333333333335%, 98.33333333333333% { top: -30em;} 100% { top: -36em;}
}
@keyframes one-step-min { 9.83% { top: 0; } 10%, 19.83% { top: -6em;} 20%, 29.83% { top: -12em;} 30%, 39.83% { top: -18em;} 40%, 49.83% { top: -24em;} 50%, 59.83% { top: -30em;} 60%, 69.83% { top: -36em;} 70%, 79.83% { top: -42em;} 80%, 89.83% { top: -48em;} 90%, 99.83% { top: -54em;} 100% { top: -60em;}
}
@keyframes ten-step-min { 16.6383% { top: 0; } 16.66666666666667%, 33.30496% { top: -6em;} 33.33333333333334%, 49.97163% { top: -12em;} 50%, 66.638296% { top: -18em;} 66.66666666666668%, 83.30496% { top: -24em;} 83.33333333333335%, 99.97163% { top: -30em;} 100% { top: -36em;}
}
@keyframes one-step-hour { 9.83% { top: 0; } 10%, 19.83% { top: -6em;} 20%, 29.83% { top: -12em;} 30%, 39.83% { top: -18em;} 40%, 49.83% { top: -24em;} 50%, 59.83% { top: -30em;} 60%, 69.83% { top: -36em;} 70%, 79.83% { top: -42em;} 80%, 89.83% { top: -48em;} 90%, 99.83% { top: -54em;} 100% { top: -60em;}
}
@keyframes ten-step-hour { 9.83% { top: 0; } 10%, 19.83% { top: -6em;} 20%, 29.83% { top: -12em;} 30%, 39.83% { top: -18em;} 40%, 49.83% { top: -24em;} 50%, 59.83% { top: -30em;} 60%, 69.83% { top: -36em;} 70%, 79.83% { top: -42em;} 80%, 89.83% { top: -48em;} 90%, 99.83% { top: -54em;} 100% { top: -60em;}
}
Developer | Keith Wyland |
Username | keithwyland |
Uploaded | September 13, 2022 |
Rating | 4 |
Size | 3,208 Kb |
Views | 20,240 |
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!
Name | Size |
SO example | 2,195 Kb |
Signal | 2,125 Kb |
Multiple Fluid Gradients | 2,626 Kb |
Full Width Areas With Sidebar | 2,709 Kb |
CSS Drawers | 67,859 Kb |
Tunnel | 1,983 Kb |
Order-changing Sidebar | 4,100 Kb |
Collapse | 1,854 Kb |
Downward spiral | 2,105 Kb |
Learning Flexbox via flexbox.io | 2,342 Kb |
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!
Name | Username | Size |
A Pen by Gregory Potdevin | GregoryPotdevin | 1,713 Kb |
CSS only simple parallax scroll | Stanssongs | 3,708 Kb |
Save for later... | Victorfreire | 1,359 Kb |
Awesome | Samarthpd | 2,901 Kb |
Awesome textarea | Ayoungh | 1,977 Kb |
Pomodoro Clock | Yas46 | 3,328 Kb |
Flexbox playground | Enxaneta | 5,418 Kb |
A Different Type of Gallery | DonPage | 2,950 Kb |
Bubble animation | Ftabor | 6,565 Kb |
TheCalendar.js | The-teacher | 6,330 Kb |
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!