{"id":222,"date":"2013-01-22T15:11:16","date_gmt":"2013-01-22T15:11:16","guid":{"rendered":"http:\/\/a1webdesignteam.com\/blog\/?p=222"},"modified":"2013-01-22T15:11:16","modified_gmt":"2013-01-22T15:11:16","slug":"create-countdown-clock-css3","status":"publish","type":"post","link":"https:\/\/a1webdesignteam.com\/blog\/create-countdown-clock-css3\/","title":{"rendered":"How To Create A Countdown Clock With CSS3"},"content":{"rendered":"

Below is the HTML markup for the clock and the explanation for my methods.<\/p>\n

 <\/p>\n

<div>\r\n\t<ol>\r\n\t\t<li>6<\/li>\r\n\t\t<li>5<\/li>\r\n\t\t<li>4<\/li>\r\n\t\t<li>3<\/li>\r\n\t\t<li>2<\/li>\r\n\t\t<li>1<\/li>\r\n\t<\/ol>\r\n\t<ol>\r\n\t\t<li>0<\/li>\r\n\t\t<li>9<\/li>\r\n\t\t<li>8<\/li>\r\n\t\t<li>7<\/li>\r\n\t\t<li>6<\/li>\r\n\t\t<li>5<\/li>\r\n\t\t<li>4<\/li>\r\n\t\t<li>3<\/li>\r\n\t\t<li>2<\/li>\r\n\t\t<li>1<\/li>\r\n\t<\/ol>\r\n\t<ol>\r\n\t\t<li>0<\/li>\r\n\t<\/ol>\r\n<\/div><\/pre>\n
There are three ordered lists that the countdown walks through. I could probably take this one step further and automate the numbers using counter-increments, but for this example, I included all numbers in the HTML. The first ordered list contains all of the numbers for the tens decimal place, the second contains the ones, and the last contains the zero we\u2019ll flash repeatedly to indicate that the countdown has completed.<\/p>\n
First, I had to figure out how to rotate through each set of numbers. With the exception of the initial \u201c6\u2033, our tens would need to change every ten seconds. That first \u201c6\u2033 which would only flash for one second at the beginning of the countdown, which we\u2019ll get to in a second.<\/p>\n
.tens li:nth-of-type(2) {\r\n\t-webkit-animation: tencount 60s ease-in-out 1s 1;\r\n\t-moz-animation:\t   tencount 60s ease-in-out 1s 1; \r\n\t-o-animation: \t   tencount 60s ease-in-out 1s 1; \r\n\t-ms-animation:\t   tencount 60s ease-in-out 1s 1; \r\n}\r\n.tens li:nth-of-type(3) {\r\n\t-webkit-animation: tencount 60s ease-in-out 11s 1;\r\n\t-moz-animation:\t   tencount 60s ease-in-out 11s 1; \r\n\t-o-animation: \t   tencount 60s ease-in-out 11s 1; \r\n\t-ms-animation:\t   tencount 60s ease-in-out 11s 1; \r\n}\r\n...<\/pre>\n
\u2026 and so on and so forth for each list item in the first ordered list. The above says that the element will use the \u201ctencount\u201d animation for 60 seconds, an \u201cease-in-out\u201d timing function for the keyframes\u2019 animation that will start at a particular second of the animation (1 seconds, 11 seconds, etc.) and only animate once. Here are the keyframes for my \u201ctencount\u201d animation:<\/p>\n
@keyframes tencount {\r\n\t0% { opacity: 1 }\r\n\t16.6% { opacity: 1 }\r\n\t16.7% { opacity: 0 }\r\n\t100% { opacity: 0 }\r\n}<\/pre>\n
At the beginning of the animation, the digit will be at 100% opacity. At 16.6% (10 seconds), it will remain at 100% opacity, but a moment later will be invisible through the end of the animation (60 seconds). The only odd part of the CSS animations for this first ordered list is that the first digit \u201c6\u2033 only gets shown for one second, so I used our next animation style \u201cdigitcount\u201d to show it for one second.<\/p>\n
.tens li:nth-of-type(1) {\r\n \t-webkit-animation: digitcount 10s ease-in-out 0s 1;\r\n\t-moz-animation:\t   digitcount 10s ease-in-out 0s 1; \r\n\t-o-animation: \t   digitcount 10s ease-in-out 0s 1; \r\n\t-ms-animation:\t   digitcount 10s ease-in-out 0s 1; \r\n}<\/pre>\n
I use the same animation for the next ordered list, but changed the number of times the animation will occur (6 instead of 1).<\/p>\n
.digits li:nth-of-type(1) {\r\n\t-webkit-animation: digitcount 10s ease-in-out 0s 6; \r\n\t-moz-animation:\t   digitcount 10s ease-in-out 0s 6; \r\n\t-o-animation: \t   digitcount 10s ease-in-out 0s 6; \r\n\t-ms-animation:\t   digitcount 10s ease-in-out 0s 6; \r\n}\r\n.digits li:nth-of-type(2) {\r\n\t-webkit-animation: digitcount 10s ease-in-out 1s 6; \r\n\t-moz-animation:\t   digitcount 10s ease-in-out 1s 6; \r\n\t-o-animation: \t   digitcount 10s ease-in-out 1s 6; \r\n\t-ms-animation:\t   digitcount 10s ease-in-out 1s 6; \r\n}\r\n...<\/pre>\n
\u2026 and so on for each item in this ordered list. These list items will be repeating over and over until all of the tens have run out. The \u201cdigitcount\u201d CSS animation has a similar set of keyframes to the \u201ctencount\u201d animation, but \u201cdigitcount\u201d is only 10 seconds long instead of 60, so we change opacity at the 1 second mark (10% of the total animation time).<\/p>\n
@keyframes digitcount {\r\n\t0% { opacity: 1 }\r\n\t9.9% { opacity: 1 }\r\n\t10% { opacity: 0 }\r\n\t100% { opacity: 0 }\r\n}<\/pre>\n
This leaves us with one more ordered list to animate: the zero that flashes when the countdown ends!<\/p>\n
.done li {\r\n\t-webkit-animation: zero 1s ease-in-out 60s infinite; \r\n\t-moz-animation:\t   zero 1s ease-in-out 60s infinite; \r\n\t-o-animation:\t   zero 1s ease-in-out 60s infinite; \r\n\t-ms-animation:\t   zero 1s ease-in-out 60s infinite; \r\n}\r\n\r\n@keyframes zero {\r\n\t0% { opacity: 1 }\r\n\t90% { opacity: 1 }\r\n\t100% { opacity: 0 }\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"
Below is the HTML markup for the clock and the explanation for my methods.   <div> <ol> <li>6<\/li> <li>5<\/li> <li>4<\/li> <li>3<\/li> <li>2<\/li> <li>1<\/li> <\/ol> <ol> <li>0<\/li> <li>9<\/li> <li>8<\/li> <li>7<\/li> <li>6<\/li> <li>5<\/li> <li>4<\/li> <li>3<\/li> <li>2<\/li> <li>1<\/li> <\/ol> <ol> <li>0<\/li> <\/ol> <\/div> There are three ordered lists that the countdown walks through. I could probably take this […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"categories":[5,7],"tags":[],"_links":{"self":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/222"}],"collection":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/comments?post=222"}],"version-history":[{"count":0,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/222\/revisions"}],"wp:attachment":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media?parent=222"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/categories?post=222"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/tags?post=222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}