CSS3：CSSだけで簡易ストーリー表示

サンプルはこちら。

See the Pen gedLt by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

ボタンを押すことで連続してカットを表示させています。

HTML

<div class="story">
  <input type="checkbox" id="start" />
  <div class="sene1">
    <p align="center"><label for="start" class="btn btn-primary btn-lg">アニメーションを見る</label></p>
  </div>
  <div class="sene2">
    <div class="col cut1">～</div>
    <div class="col cut2">～</div>
    <div class="col cut3">～</div>
  </div>
</div>

HTMLのポイントは、2行目に配置したチェックボックスです。
CSSでスイッチ的な動きをする際は基本的に「:checked」セレクタを使い、チェックのON/OFFで表示切り替えを行います。

CSS(Sass)

.sene1 {
  ～
  @include transition(1s);
}

[class*=cut] {
  opacity: 0;
}
.cut1 {@include transition(1s 1s)}
.cut2 {@include transition(1s 2s)}
.cut3 {@include transition(1s 3s)}

#start:checked ~ {
  .sene1 {
    opacity: 0;
    z-index: -1;
  }
  .sene2 {
    [class*=cut] {
      opacity: 1;
    }
  }
}

ポイント部分のみ抜粋しています。

「.sene1」と「.cut1～3」にそれぞれ transition を設定しています。
「.cut1～3」の方には再生秒数の次にディレイ秒数も指定しており、これで1カットずつ遅れて出てくる表現を出せます。

後半の「#start:checked ~」以降で、チェックボックスがチェックされている状態のスタイルを指定しています。

opacityで透明度を操作し、フェードイン/アウトを表現しています。