Pure CSS stopwatch

dabblet.css

/**
 * Pure CSS stopwatch
 */

* { box-sizing: border-box; -moz-box-sizing: border-box }

html { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAOklEQVQIWx3K2QkAMAgFwadEsBjF/ksTD0Kyn8uQme05BzOD3QW5+2YmVBWvP6oKIoLuBkXEF48zMy6Jfxr7Roi85AAAAABJRU5ErkJggg==) }

body {
	text-align: center;
}

time {
	display: inline-block;
	height: 240px;
	margin: 60px;
}

time > div {
	font-size: 160px;
	float: left;
}

.colon {
	color: #ddd;
	text-shadow: 0 1px #000, 0 2px #000, 0 3px #000;
	margin-top: -3px;
}

.colon:nth-child(4) {
	animation: colon-blink 2s linear infinite;
}

[id$=box] {
	width: 180px;
	height: 180px;
	border-radius: 18px;
	margin: 12px;
	line-height: 180px;
	text-shadow: 0 2px 2px rgba(255,255,255,.5);
	box-shadow: 0 1px 0 #fff, 0 3px 0 #b5b5b5, 0 4px 0 #fff, 0 6px 0 #b5b5b5, 0 7px 0 #fff, 0 7px 8px #000;
	overflow: hidden;
	background: linear-gradient(#f5f5f5,#b5b5b5);
}

[id$=reel] {
	position: relative;
	top: 0px;
}

@keyframes seconds {
	0%   { top: -180px; }
	100% { top: -10800px; }
}
#seconds-reel { animation: seconds 60s linear infinite; }

@keyframes minutes {
	0%   { top: -180px; }
	100% { top: -10800px; }
}
#minutes-reel { animation: minutes 3600s linear infinite; }

@keyframes hours {
	0%   { top: -180px; }
	100% { top: -4320px; }
}
#hours-reel { animation: hours 86400s linear infinite; }

@keyframes colon-blink {
	0%     { visibility: visible; }
	50%    { visibility: visible; }
	50.01% { visibility: hidden; }
	100%   { visibility: hidden; }
}

dabblet.html

<time>
	<div id="hours-box">
		<div id="hours-reel">
			<div>23</div>
			<div>00</div>
			<div>01</div>
			<div>02</div>
			<div>03</div>
			<div>04</div>
			<div>05</div>
			<div>06</div>
			<div>07</div>
			<div>08</div>
			<div>09</div>
			<div>10</div>
			<div>11</div>
			<div>12</div>
			<div>13</div>
			<div>14</div>
			<div>15</div>
			<div>16</div>
			<div>17</div>
			<div>18</div>
			<div>19</div>
			<div>20</div>
			<div>21</div>
			<div>22</div>
			<div>23</div>
		</div>
	</div>

	<div class="colon">:</div>

	<div id="minutes-box">
		<div id="minutes-reel">
			<div>59</div>
			<div>00</div>
			<div>01</div>
			<div>02</div>
			<div>03</div>
			<div>04</div>
			<div>05</div>
			<div>06</div>
			<div>07</div>
			<div>08</div>
			<div>09</div>
			<div>10</div>
			<div>11</div>
			<div>12</div>
			<div>13</div>
			<div>14</div>
			<div>15</div>
			<div>16</div>
			<div>17</div>
			<div>18</div>
			<div>19</div>
			<div>20</div>
			<div>21</div>
			<div>22</div>
			<div>23</div>
			<div>24</div>
			<div>25</div>
			<div>26</div>
			<div>27</div>
			<div>28</div>
			<div>29</div>
			<div>30</div>
			<div>31</div>
			<div>32</div>
			<div>33</div>
			<div>34</div>
			<div>35</div>
			<div>36</div>
			<div>37</div>
			<div>38</div>
			<div>39</div>
			<div>40</div>
			<div>41</div>
			<div>42</div>
			<div>43</div>
			<div>44</div>
			<div>45</div>
			<div>46</div>
			<div>47</div>
			<div>48</div>
			<div>49</div>
			<div>50</div>
			<div>51</div>
			<div>52</div>
			<div>53</div>
			<div>54</div>
			<div>55</div>
			<div>56</div>
			<div>57</div>
			<div>58</div>
			<div>59</div>
		</div>
	</div>

	<div class="colon">:</div>

	<div id="seconds-box">
		<div id="seconds-reel">
			<div>59</div>
			<div>00</div>
			<div>01</div>
			<div>02</div>
			<div>03</div>
			<div>04</div>
			<div>05</div>
			<div>06</div>
			<div>07</div>
			<div>08</div>
			<div>09</div>
			<div>10</div>
			<div>11</div>
			<div>12</div>
			<div>13</div>
			<div>14</div>
			<div>15</div>
			<div>16</div>
			<div>17</div>
			<div>18</div>
			<div>19</div>
			<div>20</div>
			<div>21</div>
			<div>22</div>
			<div>23</div>
			<div>24</div>
			<div>25</div>
			<div>26</div>
			<div>27</div>
			<div>28</div>
			<div>29</div>
			<div>30</div>
			<div>31</div>
			<div>32</div>
			<div>33</div>
			<div>34</div>
			<div>35</div>
			<div>36</div>
			<div>37</div>
			<div>38</div>
			<div>39</div>
			<div>40</div>
			<div>41</div>
			<div>42</div>
			<div>43</div>
			<div>44</div>
			<div>45</div>
			<div>46</div>
			<div>47</div>
			<div>48</div>
			<div>49</div>
			<div>50</div>
			<div>51</div>
			<div>52</div>
			<div>53</div>
			<div>54</div>
			<div>55</div>
			<div>56</div>
			<div>57</div>
			<div>58</div>
			<div>59</div>
		</div>
	</div>
</time>

settings.json

{"view":"split","seethrough":"","prefixfree":"1","page":"result"}