CSS3 タイムラインアニメーション

<h2>CSS3 タイムライン</h2>
<p>水平バージョンを表示するには、$vertical 変数を false に設定してください。</p>
<ul id='タイムライン'>
  <li class='仕事'>
    <input class='radio' id='work5' name='works' type='radio' チェック済み>
    <div class="相対">
      <label for='work5'>Lorem ipsum dolor sit amet</label>
      <span class='date'>2013 年 5 月 12 日</span>
      <span class='circle'></span>
    </div>
    <div クラス = 'コンテンツ'>
      <p>
        私は忍耐のない男だが、忍耐のない男だ。私は忍耐のない男だが、忍耐のない男だ。私は忍耐のない男だが、忍耐のない男だ。私は忍耐のない男だが、忍耐のない男だ。私は忍耐のない男だが、忍耐のない男だ。私は忍耐のない男だが、忍耐のない男だ。
      </p>
    </div>
  </li>
  <li class='仕事'>
    <input class='radio' id='work4' name='works' type='radio'>
    <div class="相対">
      <label for='work4'>Lorem ipsum dolor sit amet</label>
      <span class='date'>2013 年 5 月 11 日</span>
      <span class='circle'></span>
    </div>
    <div クラス = 'コンテンツ'>
      <p>
        私は忍耐のない男ですが、彼が全く忍耐のない男であることも知っています！ 私は全く忍耐のない男です！ 私は全く忍耐のない男です！ 私は全く忍耐のない男です！ 私は全く忍耐のない男です！ 私は全く忍耐のない男です！ 私は全く忍耐のない男です！ 私は全く忍耐のない男です！ 私は全く忍耐のない男です！ 私は全く忍耐のない男です！ 私は全く忍耐のない男です！ 私は全く忍耐のない男です！ 私は全く忍耐のない男です！ 私は全く忍耐のない男です！ 私は全く忍耐のない男です！ 私は全く忍耐のない男です！
      </p>
    </div>
  </li>
  <li class='仕事'>
    <input class='radio' id='work3' name='works' type='radio'>
    <div class="相対">
      <label for='work3'>Lorem ipsum dolor sit amet</label>
      <span class='date'>2013 年 5 月 10 日</span>
      <span class='circle'></span>
    </div>
    <div クラス = 'コンテンツ'>
      <p>
        私は忍耐のない男ですが、彼が全く忍耐のない男であることも知っています！ 私は全く忍耐のない男です！ 私は全く忍耐のない男です！ 私は全く忍耐のない男です！ 私は全く忍耐のない男です！ 私は全く忍耐のない男です！ 私は全く忍耐のない男です！ 私は全く忍耐のない男です！ 私は全く忍耐のない男です！ 私は全く忍耐のない男です！ 私は全く忍耐のない男です！ 私は全く忍耐のない男です！ 私は全く忍耐のない男です！ 私は全く忍耐のない男です！ 私は全く忍耐のない男です！ 私は全く忍耐のない男です！
      </p>
    </div>
  </li>
  <li class='仕事'>
    <input class='radio' id='work2' name='works' type='radio'>
    <div class="相対">
      <label for='work2'>Lorem ipsum dolor sit amet</label>
      <span class='date'>2013 年 5 月 9 日</span>
      <span class='circle'></span>
    </div>
    <div クラス = 'コンテンツ'>
      <p>
        私は忍耐のない男だが、忍耐のない男だ。私は忍耐のない男だが、忍耐のない男だ。私は忍耐のない男だが、忍耐のない男だ。私は忍耐のない男だが、忍耐のない男だ。私は忍耐のない男だが、忍耐のない男だ。私は忍耐のない男だが、忍耐のない男だ。
      </p>
    </div>
  </li>
  <li class='仕事'>
    <input class='radio' id='work1' name='works' type='radio'>
    <div class="相対">
      <label for='work1'>Lorem ipsum dolor sit amet</label>
      <span class='date'>2013 年 5 月 8 日</span>
      <span class='circle'></span>
    </div>
    <div クラス = 'コンテンツ'>
      <p>
        私は忍耐のない男だが、忍耐のない男だ。私は忍耐のない男だが、忍耐のない男だ。私は忍耐のない男だが、忍耐のない男だ。私は忍耐のない男だが、忍耐のない男だ。私は忍耐のない男だが、忍耐のない男だ。私は忍耐のない男だが、忍耐のない男だ。
      </p>
    </div>
  </li>
</ul>

/* -------------------------------------
 * 横向きの場合は、
 * $vertical変数をfalseにする
 * ------------------------------------- */
/* -------------------------------------
 * 一般的なスタイル
 * ------------------------------------- */
url をインポートします(https://fonts.googleapis.com/css?family=Noto+Sans);
体 {
  最大幅: 1200px;
  マージン: 0 自動;
  パディング: 0 5%;
  フォントサイズ: 100%;
  フォントファミリ: "Noto Sans"、サンセリフ;
  色: #eee9dc;
  背景: #48b379;
}

h2 {
  マージン: 3em 0 0 0;
  フォントサイズ: 1.5em;
  文字間隔: 2px;
  テキスト変換:大文字;
}

/* -------------------------------------
 * タイムライン
 * ------------------------------------- */
#タイムライン {
  リストスタイル: なし;
  マージン: 50px 0 30px 120px;
  左パディング: 30px;
  左境界線: 8px 実線 #eee9dc;
}
#タイムライン li {
  マージン: 40px 0;
  位置: 相対的;
}
#タイムライン p {
  マージン: 0 0 15px;
}

。日付 {
  上マージン: -10px;
  上位: 50%;
  左: -158px;
  フォントサイズ: 0.95em;
  行の高さ: 20px;
  位置: 絶対;
}

。丸 {
  上マージン: -10px;
  上位: 50%;
  左: -44px;
  幅: 10px;
  高さ: 10px;
  背景: #48b379;
  境界線: 5px 実線 #eee9dc;
  境界線の半径: 50%;
  表示: ブロック;
  位置: 絶対;
}

。コンテンツ {
  最大高さ: 20px;
  パディング: 50px 20px 0;
  境界線の色: 透明;
  境界線の幅: 2px;
  境界線のスタイル: solid;
  境界線の半径: 0.5em;
  位置: 相対的;
}
.content:before、.content:after {
  コンテンツ： "";
  幅: 0;
  高さ: 0;
  境界線: 透明な実線;
  位置: 絶対;
  ポインタイベント: なし;
  右: 100%;
}
.content:before {
  右境界線の色: 継承;
  境界線の幅: 20px;
  上位: 50%;
  上マージン: -20px;
}
.content:after {
  右境界線の色: #48b379;
  境界線の幅: 17px;
  上位: 50%;
  上マージン: -17px;
}
.content p {
  最大高さ: 0;
  色: 透明;
  テキスト配置: 両端揃え;
  単語区切り: 単語区切り;
  ハイフン: 自動;
  オーバーフロー: 非表示;
}

ラベル {
  フォントサイズ: 1.3em;
  位置: 絶対;
  zインデックス: 100;
  カーソル: ポインタ;
  上: 20px;
  遷移: 0.2 秒の線形変換。
}

.ラジオ{
  表示: なし;
}

.radio:checked + .relative ラベル {
  カーソル: 自動;
  変換: translateX(42px);
}
.radio:checked + .relative .circle {
  背景: #f98262;
}
.radio:checked ~ .content {
  最大高さ: 180px;
  境界線の色: #eee9dc;
  右マージン: 20px;
  変換: translateX(20px);
  遷移: max-height 0.4 秒線形、border-color 0.5 秒線形、transform 0.2 秒線形。
}
.radio:checked ~ .content p {
  最大高さ: 200px;
  色: #eee9dc;
  遷移: カラー 0.3 秒、線形 0.3 秒。
}

/* -------------------------------------
 * 携帯電話（縦型のみ）
 * ------------------------------------- */
@media スクリーンと (最大幅: 767px) {
  #タイムライン {
    左マージン: 0;
    左パディング: 0;
    左境界線: なし;
  }
  #タイムライン li {
    マージン: 50px 0;
  }

  ラベル {
    幅: 85%;
    フォントサイズ: 1.1em;
    空白: ラップなし;
    テキストオーバーフロー: 省略記号;
    オーバーフロー: 非表示;
    表示: ブロック;
    変換: translateX(18px);
  }

  。コンテンツ {
    パディング上部: 45px;
    境界線の色: #eee9dc;
  }
  .content:before、.content:after {
    境界線: 透明な実線;
    下部: 100%;
  }
  .content:before {
    境界線の下部の色: 継承;
    境界線の幅: 17px;
    上: -16px;
    左: 50px;
    左マージン: -17px;
  }
  .content:after {
    境界線下部の色: #48b379;
    境界線の幅: 20px;
    上: -20px;
    左: 50px;
    左マージン: -20px;
  }
  .content p {
    フォントサイズ: 0.9em;
    行の高さ: 1.4;
  }

  .circle、.date {
    表示: なし;
  }
}