Digital, Script-free Hourglass

It's an hourglass without javascript

by Frank Taylor

HTML

<div id="wrapper">
<table>
  <thead>
    <th>Hour<th>Minute<th>second
  </thead>
  <tbody>
    <tr>
      <td id="hour" class="hour time"><div></div>
      <td id="minute" class="minute time"><div></div>
      <td id="second" class="second time"><div></div>
  </tbody>
</table>

<table id="side" class="side">
  <thead>
  </thead>
  <tbody>
    <tr>
      <td>Hour<td class="hour time"><div></div>
    <tr>
      <td>Minute<td class="minute time"><div></div>
    <tr>
    <td>second<td  class="second time"><div></div>
</tbody>
</table>

</div>

CSS

body { background-color: #2574b0; }
      
      body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 100px;
  background: #fff;
}

table{
  border-spacing: .5em;
  border-collapse: separate;
}

td, th{
  margin: 1em;
  font-weight: 600;
text-shadow: 3px 1px 3px rgba(40,40,40,.3), -3px 1px 3px rgba(40,40,40,.4);

  }
@-webkit-keyframes fill {
 from {
   height: 0%;
}
 to {
   height: 100%;
 }
}
@-webkit-keyframes sidefill {
 from {
   width: 0%;
}
 to {
   width: 100%;
 }
}

.time > div {
  -webkit-animation-name: fill;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: linear;
  background: gray;
  height: 100%;
  display:block;
  width: 100%;
}

.time{
  height: 5em;
  width: 25em;
  border: .25em solid black;
  background: white;
  margin: 2em 1em;
  vertical-align: bottom;
  box-shadow: 3px 1px 3px rgba(40,40,40,.3), -3px 1px 3px rgba(40,40,40,.4);
  
}

#side .time > div {
  -webkit-animation-name: sidefill; 
}

.sidefill .time > div{
  text-align: left;
}
.hour > div{
  -webkit-animation-duration: 3600s;  
}

.minute > div{
   -webkit-animation-duration: 60s;  
}

.second > div{
   -webkit-animation-duration: 1s;  
}