View source for User:Misch13vous/Timer

<div class="timestamp"><div id="t0030" class="time"">00:30</div>
<div id="t0029" class="time"">00:29</div>
<div id="t0028" class="time"">00:28</div>
<div id="t0027" class="time"">00:27</div>
<div id="t0026" class="time"">00:26</div>
<div id="t0025" class="time"">00:25</div>
<div id="t0024" class="time"">00:24</div>
<div id="t0023" class="time"">00:23</div>
<div id="t0022" class="time"">00:22</div>
<div id="t0021" class="time"">00:21</div>
<div id="t0020" class="time"">00:20</div>
<div id="t0019" class="time"">00:19</div>
<div id="t0018" class="time"">00:18</div>
<div id="t0017" class="time"">00:17</div>
<div id="t0016" class="time"">00:16</div>
<div id="t0015" class="time"">00:15</div>
<div id="t0014" class="time"">00:14</div>
<div id="t0013" class="time"">00:13</div>
<div id="t0012" class="time"">00:12</div>
<div id="t0011" class="time"">00:11</div>
<div id="t0010" class="time"">00:10</div>
<div id="t0009" class="time"">00:09</div>
<div id="t0008" class="time"">00:08</div>
<div id="t0007" class="time"">00:07</div>
<div id="t0006" class="time"">00:06</div>
<div id="t0005" class="time"">00:05</div>
<div id="t0004" class="time"">00:04</div>
<div id="t0003" class="time"">00:03</div>
<div id="t0002" class="time"">00:02</div>
<div id="t0001" class="time"">00:01</div>
<div id="t0000" class="time"">00:00</div>
</div>
{{#css:
#t0030 { visibility: hidden; animation: die 1s 0s forwards; }
#t0029 { visibility: hidden; animation: die 1s 1s forwards; }
#t0028 { visibility: hidden; animation: die 1s 2s forwards; }
#t0027 { visibility: hidden; animation: die 1s 3s forwards; }
#t0026 { visibility: hidden; animation: die 1s 4s forwards; }
#t0025 { visibility: hidden; animation: die 1s 5s forwards; }
#t0024 { visibility: hidden; animation: die 1s 6s forwards; }
#t0023 { visibility: hidden; animation: die 1s 7s forwards; }
#t0022 { visibility: hidden; animation: die 1s 8s forwards; }
#t0021 { visibility: hidden; animation: die 1s 9s forwards; }
#t0020 { visibility: hidden; animation: die 1s 10s forwards; }
#t0019 { visibility: hidden; animation: die 1s 11s forwards; }
#t0018 { visibility: hidden; animation: die 1s 12s forwards; }
#t0017 { visibility: hidden; animation: die 1s 13s forwards; }
#t0016 { visibility: hidden; animation: die 1s 14s forwards; }
#t0015 { visibility: hidden; animation: die 1s 15s forwards; }
#t0014 { visibility: hidden; animation: die 1s 16s forwards; }
#t0013 { visibility: hidden; animation: die 1s 17s forwards; }
#t0012 { visibility: hidden; animation: die 1s 18s forwards; }
#t0011 { visibility: hidden; animation: die 1s 19s forwards; }
#t0010 { visibility: hidden; animation: die 1s 20s forwards; }
#t0009 { visibility: hidden; animation: die 1s 21s forwards; }
#t0008 { visibility: hidden; animation: die 1s 22s forwards; }
#t0007 { visibility: hidden; animation: die 1s 23s forwards; }
#t0006 { visibility: hidden; animation: die 1s 24s forwards; }
#t0005 { visibility: hidden; animation: die 1s 25s forwards; }
#t0004 { visibility: hidden; animation: die 1s 26s forwards; }
#t0003 { visibility: hidden; animation: die 1s 27s forwards; }
#t0002 { visibility: hidden; animation: die 1s 28s forwards; }
#t0001 { visibility: hidden; animation: die 1s 29s forwards; }
#t0000 { visibility: hidden; animation: die 10s 30s forwards; }
@keyframes die{
  0%{
    visibility:visible;
  }
  99%{
    visibility:visible;
  }
  100%{
    visibility:hidden;
  }
}

.timestamp{
  display:grid;
  color:red;
  font-family:Courier New;
}
.time{
  grid-column:1;
  grid-row:1;
}
}}