CSS3-Zeitleistenanimation

<h2>CSS3-Zeitleiste</h2>
<p>Bitte setzen Sie die Variable $vertical auf false, um die horizontale Version anzuzeigen.</p>
<ul id='Zeitleiste'>
  <li Klasse='Arbeit'>
    <Eingabeklasse='Radio' id='work5' Name='works' Typ='Radio' aktiviert>
    <div Klasse="relativ">
      <label for='work5'>Lorem ipsum dolor sit amet</label>
      <span class='date'>12. Mai 2013</span>
      <span class='Kreis'></span>
    </div>
    <div Klasse='Inhalt'>
      <p>
        Ich bin ein Mann, der keine Geduld hat, aber ich bin ein Mann, der keine Geduld hat. Ich bin ein Mann, der keine Geduld hat, aber ich bin ein Mann, der keine Geduld hat. Ich bin ein Mann, der keine Geduld hat, aber ich bin ein Mann, der keine Geduld hat. Ich bin ein Mann, der keine Geduld hat, aber ich bin ein Mann, der keine Geduld hat. Ich bin ein Mann, der keine Geduld hat, aber ich bin ein Mann, der keine Geduld hat.
      </p>
    </div>
  </li>
  <li Klasse='Arbeit'>
    <Eingabeklasse='Radio' ID='Werk4' Name='Werke' Typ='Radio'>
    <div Klasse="relativ">
      <label for='work4'>Lorem ipsum dolor sit amet</label>
      <span class='date'>11. Mai 2013</span>
      <span class='Kreis'></span>
    </div>
    <div Klasse='Inhalt'>
      <p>
        Ich bin ein Mann, der keine Geduld hat, aber ich bin ein Mann, der keine Geduld hat. Ich bin ein Mann, der keine Geduld hat, aber ich bin ein Mann, der keine Geduld hat. Ich bin ein Mann, der keine Geduld hat, aber ich bin ein Mann, der keine Geduld hat. Ich bin ein Mann, der keine Geduld hat, aber ich bin ein Mann, der keine Geduld hat. Ich bin ein Mann, der keine Geduld hat, aber ich bin ein Mann, der keine Geduld hat.
      </p>
    </div>
  </li>
  <li Klasse='Arbeit'>
    <Eingabeklasse='Radio' ID='Werk3' Name='Werke' Typ='Radio'>
    <div Klasse="relativ">
      <label for='work3'>Lorem ipsum dolor sit amet</label>
      <span class='date'>10. Mai 2013</span>
      <span class='Kreis'></span>
    </div>
    <div Klasse='Inhalt'>
      <p>
        Ich bin ein Mann, der keine Geduld hat, aber ich bin ein Mann, der keine Geduld hat. Ich bin ein Mann, der keine Geduld hat, aber ich bin ein Mann, der keine Geduld hat. Ich bin ein Mann, der keine Geduld hat, aber ich bin ein Mann, der keine Geduld hat. Ich bin ein Mann, der keine Geduld hat, aber ich bin ein Mann, der keine Geduld hat. Ich bin ein Mann, der keine Geduld hat, aber ich bin ein Mann, der keine Geduld hat.
      </p>
    </div>
  </li>
  <li Klasse='Arbeit'>
    <Eingabeklasse='Radio' ID='Werk2' Name='Werke' Typ='Radio'>
    <div Klasse="relativ">
      <label for='work2'>Lorem ipsum dolor sit amet</label>
      <span class='date'>9. Mai 2013</span>
      <span class='Kreis'></span>
    </div>
    <div Klasse='Inhalt'>
      <p>
        Ich bin ein Mann, der keine Geduld hat, aber ich bin ein Mann, der keine Geduld hat. Ich bin ein Mann, der keine Geduld hat, aber ich bin ein Mann, der keine Geduld hat. Ich bin ein Mann, der keine Geduld hat, aber ich bin ein Mann, der keine Geduld hat. Ich bin ein Mann, der keine Geduld hat, aber ich bin ein Mann, der keine Geduld hat. Ich bin ein Mann, der keine Geduld hat, aber ich bin ein Mann, der keine Geduld hat.
      </p>
    </div>
  </li>
  <li Klasse='Arbeit'>
    <Eingabeklasse='Radio' ID='Werk1' Name='Werke' Typ='Radio'>
    <div Klasse="relativ">
      <label for='work1'>Lorem ipsum dolor sit amet</label>
      <span class='date'>08. Mai 2013</span>
      <span class='Kreis'></span>
    </div>
    <div Klasse='Inhalt'>
      <p>
        Ich bin ein Mann, der keine Geduld hat, aber ich bin ein Mann, der keine Geduld hat. Ich bin ein Mann, der keine Geduld hat, aber ich bin ein Mann, der keine Geduld hat. Ich bin ein Mann, der keine Geduld hat, aber ich bin ein Mann, der keine Geduld hat. Ich bin ein Mann, der keine Geduld hat, aber ich bin ein Mann, der keine Geduld hat. Ich bin ein Mann, der keine Geduld hat, aber ich bin ein Mann, der keine Geduld hat.
      </p>
    </div>
  </li>
</ul>

/* -------------------------------------
 * Bei horizontaler Ausführung stellen Sie die
 * Variable $vertical auf false
 * ------------------------------------- */
/* -------------------------------------
 * Allgemeiner Stil
 * ------------------------------------- */
@import-URL (https://fonts.googleapis.com/css?family=Noto+Sans);
Körper {
  maximale Breite: 1200px;
  Rand: 0 automatisch;
  Polsterung: 0,5 %;
  Schriftgröße: 100 %;
  Schriftfamilie: „Noto Sans“, serifenlos;
  Farbe: #eee9dc;
  Hintergrund: #48b379;
}

h2 {
  Rand: 3em 0 0 0;
  Schriftgröße: 1,5em;
  Buchstabenabstand: 2px;
  Texttransformation: Großbuchstaben;
}

/* -------------------------------------
 * Zeitleiste
 * ------------------------------------- */
#Zeitleiste {
  Listenstil: keiner;
  Rand: 50px 0 30px 120px;
  Polsterung links: 30px;
  Rahmen links: 8px durchgezogen #eee9dc;
}
#Zeitleiste li {
  Rand: 40px 0;
  Position: relativ;
}
#Zeitleiste p {
  Rand: 0 0 15px;
}

.Datum {
  Rand oben: -10px;
  oben: 50 %;
  links: -158px;
  Schriftgröße: 0,95em;
  Zeilenhöhe: 20px;
  Position: absolut;
}

.Kreis {
  Rand oben: -10px;
  oben: 50 %;
  links: -44px;
  Breite: 10px;
  Höhe: 10px;
  Hintergrund: #48b379;
  Rand: 5px durchgezogen #eee9dc;
  Randradius: 50 %;
  Anzeige: Block;
  Position: absolut;
}

.Inhalt {
  maximale Höhe: 20px;
  Polsterung: 50px 20px 0;
  Rahmenfarbe: transparent;
  Rahmenbreite: 2px;
  Rahmenstil: durchgezogen;
  Rahmenradius: 0,5em;
  Position: relativ;
}
.content:vorher, .content:nachher {
  Inhalt: "";
  Breite: 0;
  Höhe: 0;
  Rand: durchgehend transparent;
  Position: absolut;
  Zeigerereignisse: keine;
  rechts: 100%;
}
.Inhalt:vor {
  Rahmenfarbe rechts: erben;
  Rahmenbreite: 20px;
  oben: 50 %;
  Rand oben: -20px;
}
.Inhalt:nach {
  Rahmenfarbe rechts: #48b379;
  Rahmenbreite: 17px;
  oben: 50 %;
  Rand oben: -17px;
}
.Inhalt p {
  maximale Höhe: 0;
  Farbe: transparent;
  Textausrichtung: Blocksatz;
  Worttrennung: Worttrennung;
  Bindestriche: auto;
  Überlauf: versteckt;
}

Etikett {
  Schriftgröße: 1,3em;
  Position: absolut;
  Z-Index: 100;
  Cursor: Zeiger;
  oben: 20px;
  Übergang: Transformation 0,2 s linear;
}

.radio {
  Anzeige: keine;
}

.radio:geprüft + .relative Bezeichnung {
  Cursor: automatisch;
  transformieren: übersetzenX(42px);
}
.radio:geprüft + .relative .circle {
  Hintergrund: #f98262;
}
.radio:geprüft ~ .content {
  maximale Höhe: 180px;
  Rahmenfarbe: #eee9dc;
  Rand rechts: 20px;
  transformieren: übersetzenX(20px);
  Übergang: max. Höhe 0,4 s linear, Rahmenfarbe 0,5 s linear, Transformation 0,2 s linear;
}
.radio:geprüft ~ .content p {
  maximale Höhe: 200px;
  Farbe: #eee9dc;
  Übergang: Farbe 0,3 s linear 0,3 s;
}

/* -------------------------------------
 * Mobiltelefone (nur vertikale Version)
 * ------------------------------------- */
@media screen und (max-width: 767px) {
  #Zeitleiste {
    Rand links: 0;
    Polsterung links: 0;
    Rand links: keiner;
  }
  #Zeitleiste li {
    Rand: 50px 0;
  }

  Etikett {
    Breite: 85 %;
    Schriftgröße: 1,1em;
    Leerzeichen: Nowrap;
    Textüberlauf: Auslassungspunkte;
    Überlauf: versteckt;
    Anzeige: Block;
    transformieren: übersetzenX(18px);
  }

  .Inhalt {
    Polsterung oben: 45px;
    Rahmenfarbe: #eee9dc;
  }
  .content:vorher, .content:nachher {
    Rand: durchgehend transparent;
    unten: 100 %;
  }
  .Inhalt:vor {
    Rahmenunterseite-Farbe: erben;
    Rahmenbreite: 17px;
    oben: -16px;
    links: 50px;
    Rand links: -17px;
  }
  .Inhalt:nach {
    Farbe des unteren Rahmens: #48b379;
    Rahmenbreite: 20px;
    oben: -20px;
    links: 50px;
    Rand links: -20px;
  }
  .Inhalt p {
    Schriftgröße: 0,9em;
    Zeilenhöhe: 1,4;
  }

  .Kreis, .Datum {
    Anzeige: keine;
  }
}