Benötige einen timer der vorwärts läuft. Ja?

Hi, was ich benötige, ist ein Timer der vorwärtsläuft. Sobald die Seite geladen ist, fängt der Timer von 00:00:00 an. Ab 10 Sekunden wird die Schrift rot. Ab 20 Sekunden blinkt die Schrift rot. Darunter ein Reset Button. Sobald der betätigt wird, fängt der Timer von vorne an, und zwar wieder in Weiß und nicht in Rot. Alle Versuche scheiterten :) Jemand eine Idee wie ich dies verwirklichen kann?

Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    <style>
  #balkenout{
  border:2px solid black;
  height:50px;
  width:80%;
  margin:0 auto;
  overflow:hidden;
}
#timer{
  text-align:center;
  font-size:40px;
}
#balkenin{
  background:green;
  width:30%;
  height:50px;
  text-align:center;
}
#balkentext{
 
  position:unset;
  z-index:1;
  text-align:center;
  background:none;
    font-size:40px;
  color:black;
  height:0px;
  width:100%;
  display:block;
}
.blinken{
  animation:blink 500ms linear infinite;
  background:green;
}
@keyframes blink{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX