Home » Tutorials

Analog Clock with Pure CSS3 (without javascript)

Tutorials
Author Reading 20 min Views 1k. Published by Modified by

CSS3 clock. Today – another one great article – we are going to create pure CSS3 Analog Clock without any javascript (we are going to use power of CSS3 with animations to build it). Our clocks have three arrows on the face – hour, minute and second. Each of them – a narrow rectangle rotated to the desired angle. How it works in result? – Easy, I am using necessary delays for all these arrows. How exactly – read on.

 

For our clock – I have prepared -webkit and -moz styles. So please keep in mind – that clock will work only in Firefox, and Webkit-based browsers (Chrome and Safari). If you like – you always can expand necessary styles (for arrows) for IE and Opera browsers (by adding same stylesheets with -ms and -o prefixes).

Here are samples and downloadable package:

Contents
  1. Step 1. HTML markup
  2. index.html
  3. Step 2. CSS
  4. css/clocks.css
  5. Step 4. Images
  6. Conclusion
Live Demo
download in package

Ok, download the example files and lets start coding !

Step 1. HTML markup

The mark-up for our clock is not very simple – it contain lot of DIV elements. Each of them – our arrows. Here it is.

index.html

01 <!DOCTYPE html>
02 <html lang="en">
03     <head>
04         <meta charset="utf-8" />
05         <title>Analog Clock with Pure CSS3 (without javascript) | Script Tutorials</title>
06         <link href="css/layout.css" type="text/css" rel="stylesheet">
07         <link href="css/clocks.css" type="text/css" rel="stylesheet">
08     </head>
09     <body>
10         <header>
11             <h2>Analog Clock with Pure CSS3 (without javascript)</h2>
12             <a href="https://www.script-tutorials.com/analog-clock-with-pure-css3/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
13         </header>
14         <div class="container">
15             <div id="clock">
16                 <div class="secs">
17                     <div id="s1"></div><div id="s2"></div><div id="s3"></div>
18                     <div id="s4"></div><div id="s5"></div><div id="s6"></div>
19                     <div id="s7"></div><div id="s8"></div><div id="s9"></div>
20                     <div id="s10"></div><div id="s11"></div><div id="s12"></div>
21                     <div id="s13"></div><div id="s14"></div><div id="s15"></div>
22                     <div id="s16"></div><div id="s17"></div><div id="s18"></div>
23                     <div id="s19"></div><div id="s20"></div><div id="s21"></div>
24                     <div id="s22"></div><div id="s23"></div><div id="s24"></div>
25                     <div id="s25"></div><div id="s26"></div><div id="s27"></div>
26                     <div id="s28"></div><div id="s29"></div><div id="s30"></div>
27                     <div id="s31"></div><div id="s32"></div><div id="s33"></div>
28                     <div id="s34"></div><div id="s35"></div><div id="s36"></div>
29                     <div id="s37"></div><div id="s38"></div><div id="s39"></div>
30                     <div id="s40"></div><div id="s41"></div><div id="s42"></div>
31                     <div id="s43"></div><div id="s44"></div><div id="s45"></div>
32                     <div id="s46"></div><div id="s47"></div><div id="s48"></div>
33                     <div id="s49"></div><div id="s50"></div><div id="s51"></div>
34                     <div id="s52"></div><div id="s53"></div><div id="s54"></div>
35                     <div id="s55"></div><div id="s56"></div><div id="s57"></div>
36                     <div id="s58"></div><div id="s59"></div><div id="s60"></div>
37                 </div>
38                 <div class="mins">
39                     <div id="m1"></div><div id="m2"></div><div id="m3"></div>
40                     <div id="m4"></div><div id="m5"></div><div id="m6"></div>
41                     <div id="m7"></div><div id="m8"></div><div id="m9"></div>
42                     <div id="m10"></div><div id="m11"></div><div id="m12"></div>
43                     <div id="m13"></div><div id="m14"></div><div id="m15"></div>
44                     <div id="m16"></div><div id="m17"></div><div id="m18"></div>
45                     <div id="m19"></div><div id="m20"></div><div id="m21"></div>
46                     <div id="m22"></div><div id="m23"></div><div id="m24"></div>
47                     <div id="m25"></div><div id="m26"></div><div id="m27"></div>
48                     <div id="m28"></div><div id="m29"></div><div id="m30"></div>
49                     <div id="m31"></div><div id="m32"></div><div id="m33"></div>
50                     <div id="m34"></div><div id="m35"></div><div id="m36"></div>
51                     <div id="m37"></div><div id="m38"></div><div id="m39"></div>
52                     <div id="m40"></div><div id="m41"></div><div id="m42"></div>
53                     <div id="m43"></div><div id="m44"></div><div id="m45"></div>
54                     <div id="m46"></div><div id="m47"></div><div id="m48"></div>
55                     <div id="m49"></div><div id="m50"></div><div id="m51"></div>
56                     <div id="m52"></div><div id="m53"></div><div id="m54"></div>
57                     <div id="m55"></div><div id="m56"></div><div id="m57"></div>
58                     <div id="m58"></div><div id="m59"></div><div id="m60"></div>
59                 </div>
60                 <div class="hours">
61                     <div id="h1"></div><div id="h2"></div><div id="h3"></div>
62                     <div id="h4"></div><div id="h5"></div><div id="h6"></div>
63                     <div id="h7"></div><div id="h8"></div><div id="h9"></div>
64                     <div id="h10"></div><div id="h11"></div><div id="h12"></div>
65                 </div>
66             </div>
67         </div>
68     </body>
69 </html>

Step 2. CSS

Now – CSS styles. As usual, we won’t publish main page layout styles (layout.css). But, there are stylesheets for our clock:

css/clocks.css

001 #clock {
002     background: #fff url(cface.png) 0 0 no-repeat;
003     height: 500px;
004     margin: 0 auto;
005     overflow: hidden;
006     position: relative;
007     width: 500px;
008     -webkit-border-radius: 250px;
009     -moz-border-radius: 250px;
010     -ms-border-radius: 250px;
011     -o-border-radius: 250px;
012     border-radius: 250px;
013 }
014 /* seconds */
015 @-webkit-keyframes secs_effect {
016     0% {opacity: 1;}
017     1.66% {opacity: 1;}
018     1.67% {opacity: 0;}
019     100% {opacity: 0;}
020 }
021 @-moz-keyframes secs_effect {
022     0% {opacity: 1;}
023     1.66% {opacity: 1;}
024     1.67% {opacity: 0;}
025     100% {opacity: 0;}
026 }
027 #clock  .secs {
028     height: 400px;
029     left: 155px;
030     position: absolute;
031     top: 249px;
032     width: 400px;
033 }
034 #clock  .secs div {
035     background-color: #860000;
036     height: 2px;
037     opacity: 0;
038     position: absolute;
039     width: 190px;
040     -moz-animation-name: secs_effect;
041     -moz-animation-duration: 60s;
042     -moz-animation-timing-function: linear;
043     -moz-animation-iteration-count: infinite;
044     -moz-animation-direction: normal;
045     -moz-animation-delay: 0;
046     -moz-animation-play-state: running;
047     -moz-animation-fill-mode: forwards;
048     -webkit-animation-name: secs_effect;
049     -webkit-animation-duration: 60s;
050     -webkit-animation-timing-function: linear;
051     -webkit-animation-iteration-count: infinite;
052     -webkit-animation-direction: normal;
053     -webkit-animation-delay: 0;
054     -webkit-animation-play-state: running;
055     -webkit-animation-fill-mode: forwards;
056 }
057 #clock #s1 {
058 -moz-transform: rotate(-90deg) translatex(130px);
059 -moz-animation-delay: 0s;
060 -webkit-transform: rotate(-90deg) translatex(130px);
061 -webkit-animation-delay: 0s;
062 }
063 #clock #s2 {
064 -moz-transform: rotate(-84deg) translatex(130px);
065 -moz-animation-delay: 1s;
066 -webkit-transform: rotate(-84deg) translatex(130px);
067 -webkit-animation-delay: 1s;
068 }
069 #clock #s3 {
070 -moz-transform: rotate(-78deg) translatex(130px);
071 -moz-animation-delay: 2s;
072 -webkit-transform: rotate(-78deg) translatex(130px);
073 -webkit-animation-delay: 2s;
074 }
075 ...........
076 #clock #s60 {
077 -moz-transform: rotate(264deg) translatex(130px);
078 -moz-animation-delay: 59s;
079 -webkit-transform: rotate(264deg) translatex(130px);
080 -webkit-animation-delay: 59s;
081 }
082 /* minutes */
083 @-webkit-keyframes mins_effect {
084     0% {opacity: 1;}
085     1.66% {opacity: 1;}
086     1.67% {opacity: 0;}
087     100% {opacity: 0;}
088 }
089 @-moz-keyframes mins_effect {
090     0% {opacity: 1;}
091     1.66% {opacity: 1;}
092     1.67% {opacity: 0;}
093     100% {opacity: 0;}
094 }
095 #clock  .mins {
096     height: 300px;
097     left: 175px;
098     position: absolute;
099     top: 249px;
100     width: 300px;
101 }
102 #clock  .mins div {
103     background-color: #000086;
104     height: 3px;
105     opacity: 0;
106     position: absolute;
107     width: 150px;
108     -moz-animation-name: mins_effect;
109     -moz-animation-duration: 3600s;
110     -moz-animation-timing-function: linear;
111     -moz-animation-iteration-count: infinite;
112     -moz-animation-direction: normal;
113     -moz-animation-delay: 0;
114     -moz-animation-play-state: running;
115     -moz-animation-fill-mode: forwards;
116     -webkit-animation-name: mins_effect;
117     -webkit-animation-duration: 3600s;
118     -webkit-animation-timing-function: linear;
119     -webkit-animation-iteration-count: infinite;
120     -webkit-animation-direction: normal;
121     -webkit-animation-delay: 0;
122     -webkit-animation-play-state: running;
123     -webkit-animation-fill-mode: forwards;
124 }
125 #clock #m1 {
126 -moz-transform: rotate(-90deg) translatex(110px);
127 -moz-animation-delay: 0s;
128 -webkit-transform: rotate(-90deg) translatex(110px);
129 -webkit-animation-delay: 0s;
130 }
131 #clock #m2 {
132 -moz-transform: rotate(-84deg) translatex(110px);
133 -moz-animation-delay: 60s;
134 -webkit-transform: rotate(-84deg) translatex(110px);
135 -webkit-animation-delay: 60s;
136 }
137 #clock #m3 {
138 -moz-transform: rotate(-78deg) translatex(110px);
139 -moz-animation-delay: 120s;
140 -webkit-transform: rotate(-78deg) translatex(110px);
141 -webkit-animation-delay: 120s;
142 }
143 ...........
144 #clock #m60 {
145 -moz-transform: rotate(264deg) translatex(110px);
146 -moz-animation-delay: 3540s;
147 -webkit-transform: rotate(264deg) translatex(110px);
148 -webkit-animation-delay: 3540s;
149 }
150 /* hours */
151 @-webkit-keyframes hours_effect {
152     0% {opacity: 1;}
153     8.33% {opacity: 1;}
154     8.34% {opacity: 0;}
155     100% {opacity: 0;}
156 }
157 @-moz-keyframes hours_effect {
158     0% {opacity: 1;}
159     8.33% {opacity: 1;}
160     8.34% {opacity: 0;}
161     100% {opacity: 0;}
162 }
163 #clock  .hours {
164     height: 300px;
165     left: 175px;
166     position: absolute;
167     top: 249px;
168     width: 300px;
169 }
170 #clock  .hours div {
171     background-color: #860086;
172     height: 3px;
173     opacity: 0;
174     position: absolute;
175     width: 150px;
176     -moz-animation-name: hours_effect;
177     -moz-animation-duration: 43200s;
178     -moz-animation-timing-function: linear;
179     -moz-animation-iteration-count: infinite;
180     -moz-animation-direction: normal;
181     -moz-animation-delay: 0;
182     -moz-animation-play-state: running;
183     -moz-animation-fill-mode: forwards;
184     -webkit-animation-name: hours_effect;
185     -webkit-animation-duration: 43200s;
186     -webkit-animation-timing-function: linear;
187     -webkit-animation-iteration-count: infinite;
188     -webkit-animation-direction: normal;
189     -webkit-animation-delay: 0;
190     -webkit-animation-play-state: running;
191     -webkit-animation-fill-mode: forwards;
192 }
193 #clock #h1 {
194 -moz-transform: rotate(-180deg) translatex(110px);
195 -moz-animation-delay: 0s;
196 -webkit-transform: rotate(-180deg) translatex(110px);
197 -webkit-animation-delay: 0s;
198 }
199 #clock #h2 {
200 -moz-transform: rotate(-150deg) translatex(110px);
201 -moz-animation-delay: 3600s;
202 -webkit-transform: rotate(-150deg) translatex(110px);
203 -webkit-animation-delay: 3600s;
204 }
205 #clock #h3 {
206 -moz-transform: rotate(-120deg) translatex(110px);
207 -moz-animation-delay: 7200s;
208 -webkit-transform: rotate(-120deg) translatex(110px);
209 -webkit-animation-delay: 7200s;
210 }
211 ...........
212 #clock #h12 {
213 -moz-transform: rotate(150deg) translatex(110px);
214 -moz-animation-delay: 39600s;
215 -webkit-transform: rotate(150deg) translatex(110px);
216 -webkit-animation-delay: 39600s;
217 }

Now – you can understand the main idea. I won’t publish all ‘recurring’ styles for each arrow. Full code you can find in our package.

Step 4. Images

For our clock I have used single image (as face of our clock):

Analog Clock with Pure CSS3 | Script Tutorials

Live Demo
download in package

Conclusion

Finally we have built our clock! This was difficult, but we did it. I hope that this will interesting addition to your website. Don’t forget to tell thanks and leave a comment. Good luck!

Rate article
© 2026 Script Tutorials