CSS3-Countdown-Effekt

<div Klasse='Wrapper'>
  <div Klasse = "Zeitteil-Wrapper">
    <div class='Zeitteil Minuten Zehner'>
      <div Klasse='Ziffernwrapper'>
        <span class='digit'>0</span>
        <span class='digit'>5</span>
        <span class='digit'>4</span>
        <span class='digit'>3</span>
        <span class='digit'>2</span>
        <span class='digit'>1</span>
        <span class='digit'>0</span>
      </div>
    </div>
    <div class='Zeitteil Minuten Einsen'>
      <div Klasse='Ziffernwrapper'>
        <span class='digit'>0</span>
        <span class='digit'>9</span>
        <span class='digit'>8</span>
        <span class='digit'>7</span>
        <span class='digit'>6</span>
        <span class='digit'>5</span>
        <span class='digit'>4</span>
        <span class='digit'>3</span>
        <span class='digit'>2</span>
        <span class='digit'>1</span>
        <span class='digit'>0</span>
      </div>
    </div>
  </div>
  <div Klasse = "Zeitteil-Wrapper">
    <div Klasse = 'Zeitteil Sekunden Zehner'>
      <div Klasse='Ziffernwrapper'>
        <span class='digit'>0</span>
        <span class='digit'>5</span>
        <span class='digit'>4</span>
        <span class='digit'>3</span>
        <span class='digit'>2</span>
        <span class='digit'>1</span>
        <span class='digit'>0</span>
      </div>
    </div>
    <div Klasse = 'Zeitteil Sekunden Einsen'>
      <div Klasse='Ziffernwrapper'>
        <span class='digit'>0</span>
        <span class='digit'>9</span>
        <span class='digit'>8</span>
        <span class='digit'>7</span>
        <span class='digit'>6</span>
        <span class='digit'>5</span>
        <span class='digit'>4</span>
        <span class='digit'>3</span>
        <span class='digit'>2</span>
        <span class='digit'>1</span>
        <span class='digit'>0</span>
      </div>
    </div>
  </div>
  <div Klasse = "Zeitteil-Wrapper">
    <div Klasse = 'Zeitteil Hundertstel Zehner'>
      <div Klasse='Ziffernwrapper'>
        <span class='digit'>0</span>
        <span class='digit'>9</span>
        <span class='digit'>8</span>
        <span class='digit'>7</span>
        <span class='digit'>6</span>
        <span class='digit'>5</span>
        <span class='digit'>4</span>
        <span class='digit'>3</span>
        <span class='digit'>2</span>
        <span class='digit'>1</span>
        <span class='digit'>0</span>
      </div>
    </div>
    <div Klasse = 'Zeitteil Hundertstel Einer'>
      <div Klasse='Ziffernwrapper'>
        <span class='digit'>0</span>
        <span class='digit'>9</span>
        <span class='digit'>8</span>
        <span class='digit'>7</span>
        <span class='digit'>6</span>
        <span class='digit'>5</span>
        <span class='digit'>4</span>
        <span class='digit'>3</span>
        <span class='digit'>2</span>
        <span class='digit'>1</span>
        <span class='digit'>0</span>
      </div>
    </div>
  </div>
</div>

/* Mit Geschwindigkeit und Verzögerung der Animation spielen */
/* ================================================ */
.Ziffer {
  Anzeige: Inline-Block;
  Schriftgröße: 200px;
  Farbe: rgba(0, 0, 0, 0,25);
  Höhe: 180px;
  Zeilenhöhe: 1;
}

.Zeitteil-Wrapper {
  Anzeige: Inline-Block;
  Rand rechts: 50px;
  Position: relativ;
}
.time-part-wrapper:nicht(:letztes-Kind):nach {
  Inhalt: ":";
  Anzeige: Block;
  Breite: 30px;
  Höhe: 230px;
  Position: absolut;
  oben: 0px;
  rechts: -30px;
  Farbe: rgba(0, 0, 0, 0,25);
  Schriftgröße: 200px;
  Zeilenhöhe: 0,9;
}

.Zeitteil {
  Breite: 140px;
  Textausrichtung: zentriert;
  Höhe: 180px;
  Überlauf: versteckt;
  Anzeige: Inline-Block;
  Rand links: -5px;
  Box-Größe: Rahmenbox;
}
.Zeitteil .Ziffernwrapper {
  Animations-Timing-Funktion: kubische Bézierkurve (1, 0, 1, 0);
}
.Zeitteil.Minuten.Zehner .Ziffernwrapper {
  Animationsname: Minuten-Zehntel;
  Animationsdauer: 3600s;
  Anzahl der Animationsiterationen: 1;
}
.Zeitteil.Minuten.Einer .Ziffernwrapper {
  Animationsname: Minuten-Einsen;
  Animationsdauer: 600s;
  Anzahl der Animationsiterationen: 6;
}
.Zeitteil.Sekunden.Zehner .Ziffernwrapper {
  Animationsname: Sekunden-Zehntel;
  Animationsdauer: 60s;
  Anzahl der Animationsiterationen: 60;
}
.Zeitteil.Sekunden.Einer .Ziffernwrapper {
  Animationsname: Sekunden-Einsen;
  Animationsdauer: 10s;
  Anzahl der Animationsiterationen: 360;
}
.Zeitteil.Hundertstel.Zehner .Ziffernwrapper {
  Animationsname: Hundertstel-Zehntel;
  Animationsdauer: 1 s;
  Anzahl der Animationsiterationen: 3600;
}
.Zeitteil.Hundertstel.Einer .Ziffernwrapper {
  Animationsname: Hundertstel-Einer;
  Animationsdauer: 0,1 s;
  Anzahl der Animationsiterationen: 36000;
}

@keyframes Minuten-Zehntel {
  0% {
    transformieren: übersetzenY(-180px);
  }
  16,66667 %
    transformieren: übersetzenY(-360px);
  }
  33,33333 %
    transformieren: übersetzenY(-540px);
  }
  50 % {
    transformieren: übersetzenY(-720px);
  }
  66,66667 %
    transformieren: übersetzenY(-900px);
  }
  83,33333 %
    transformieren: übersetzenY(-1080px);
  }
}
@keyframes Minuten-Einsen {
  0% {
    transformieren: übersetzenY(-180px);
  }
  10% {
    transformieren: übersetzenY(-360px);
  }
  20% {
    transformieren: übersetzenY(-540px);
  }
  30% {
    transformieren: übersetzenY(-720px);
  }
  40 % {
    transformieren: übersetzenY(-900px);
  }
  50 % {
    transformieren: übersetzenY(-1080px);
  }
  60 % {
    transformieren: übersetzenY(-1260px);
  }
  70 % {
    transformieren: übersetzenY(-1440px);
  }
  80 % {
    transformieren: übersetzenY(-1620px);
  }
  90 % {
    transformieren: übersetzenY(-1800px);
  }
}
@keyframes Sekunden-Zehntel {
  0% {
    transformieren: übersetzenY(-180px);
  }
  16,66667 %
    transformieren: übersetzenY(-360px);
  }
  33,33333 %
    transformieren: übersetzenY(-540px);
  }
  50 % {
    transformieren: übersetzenY(-720px);
  }
  66,66667 %
    transformieren: übersetzenY(-900px);
  }
  83,33333 %
    transformieren: übersetzenY(-1080px);
  }
}
@keyframes Sekunden-Einsen {
  0% {
    transformieren: übersetzenY(-180px);
  }
  10% {
    transformieren: übersetzenY(-360px);
  }
  20% {
    transformieren: übersetzenY(-540px);
  }
  30% {
    transformieren: übersetzenY(-720px);
  }
  40 % {
    transformieren: übersetzenY(-900px);
  }
  50 % {
    transformieren: übersetzenY(-1080px);
  }
  60 % {
    transformieren: übersetzenY(-1260px);
  }
  70 % {
    transformieren: übersetzenY(-1440px);
  }
  80 % {
    transformieren: übersetzenY(-1620px);
  }
  90 % {
    transformieren: übersetzenY(-1800px);
  }
}
@keyframes Hundertstel-Zehntel {
  0% {
    transformieren: übersetzenY(-180px);
  }
  10% {
    transformieren: übersetzenY(-360px);
  }
  20% {
    transformieren: übersetzenY(-540px);
  }
  30% {
    transformieren: übersetzenY(-720px);
  }
  40 % {
    transformieren: übersetzenY(-900px);
  }
  50 % {
    transformieren: übersetzenY(-1080px);
  }
  60 % {
    transformieren: übersetzenY(-1260px);
  }
  70 % {
    transformieren: übersetzenY(-1440px);
  }
  80 % {
    transformieren: übersetzenY(-1620px);
  }
  90 % {
    transformieren: übersetzenY(-1800px);
  }
}
@keyframes Hundertstel-Einsen {
  0% {
    transformieren: übersetzenY(-180px);
  }
  10% {
    transformieren: übersetzenY(-360px);
  }
  20% {
    transformieren: übersetzenY(-540px);
  }
  30% {
    transformieren: übersetzenY(-720px);
  }
  40 % {
    transformieren: übersetzenY(-900px);
  }
  50 % {
    transformieren: übersetzenY(-1080px);
  }
  60 % {
    transformieren: übersetzenY(-1260px);
  }
  70 % {
    transformieren: übersetzenY(-1440px);
  }
  80 % {
    transformieren: übersetzenY(-1620px);
  }
  90 % {
    transformieren: übersetzenY(-1800px);
  }
}
Körper {
  Hintergrund: #F1614B;
  Rand: 0;
  Schriftfamilie: „Aldrich“;
}

.wrapper {
  Rand: 100px automatisch;
  Breite: 1000px;
  Position: relativ;
}
.wrapper:vorher, .wrapper:nachher {
  Inhalt: "";
  Anzeige: Block;
  Position: absolut;
  Breite: 100 %;
  links: 0;
  Höhe: 20px;
  Z-Index: 10;
}
.wrapper:vor {
  oben: 0px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YxNjE0YiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2YxNjE0YiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  Hintergrundgröße: 100 %;
  Hintergrundbild: -webkit-gradient(linear, 50 % 0 %, 50 % 100 %, Farbstopp(0 %, #f1614b), Farbstopp(100 %, rgba(241, 97, 75, 0)));
  Hintergrundbild: -moz-linear-gradient(oben, #f1614b 0%, rgba(241, 97, 75, 0) 100%);
  Hintergrundbild: -webkit-linear-gradient(oben, #f1614b 0%, rgba(241, 97, 75, 0) 100%);
  Hintergrundbild: linearer Farbverlauf (nach unten, #f1614b 0 %, rgba (241, 97, 75, 0) 100 %);
}
.wrapper:nach {
  unten: 0px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YxNjE0YiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMTYxNGIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  Hintergrundgröße: 100 %;
  Hintergrundbild: -webkit-gradient(linear, 50 % 0 %, 50 % 100 %, Farbstopp(0 %, rgba(241, 97, 75, 0)), Farbstopp(100 %, #f1614b));
  Hintergrundbild: -moz-linear-gradient(top, rgba(241, 97, 75, 0) 0%, #f1614b 100%);
  Hintergrundbild: -webkit-linear-gradient(top, rgba(241, 97, 75, 0) 0%, #f1614b 100%);
  Hintergrundbild: linearer Farbverlauf (nach unten, rgba (241, 97, 75, 0) 0 %, #f1614b 100 %);
}