CSSだけでTransitionアニメーションを逆再生させる方法

やりたいこと

CSSアニメーションのひとつにtransitionがある. 今回はこれを使ってアニメーションの逆再生をなんとか実現しようというお話. HTMLとCSSだけを使い(JSは使わずに),チェックボックスにチェックが付いたらdiv要素を移動させてから回転させ,チェックが外れたら逆回転してから元の位置へ移動するようにしたい. このように...

See the Pen CSS Transition Reverse! by Hideyuki Tabata (@seeker5084) on CodePen.

まずは基本のHTMLとCSSを書く

今回使うHTMLは次のもの. 至ってシンプル.

body内のHTML


<input type='checkbox' id='checkbox'>
<label for='checkbox'>CLICK ME!!!</label>
<div class='box'></div>

label要素やdiv要素などの見た目を良くするために次のCSSコードも追記.

見た目を良くするCSS


body {
  padding: 2.6em;
  font-family: sans-serif;
}
label {
  display: inline-block;
  margin-bottom: 1em;
}
.box {
  width: 100px;
  height: 100px;
  background: magenta;
  position: relative;
}

これで最初にお見せしたデモの初期状態そのものになる.

Transitionプロパティを書く

まずはチェックボックスがcheckedになった時のCSSを追記.


.box {
  left: 0;
  transform: rotate(0);
}
#checkbox:checked ~ .box {
  left: 200px;
  transform: rotate(135deg);
}

これでチェックボックスにチェックが付いたら.boxは右に200px動き,135度のアングルが付くようになる. そして,これをアニメーションにするためtransitionプロパティを追記する. transition: プロパティ名変化する時間遅延時間という書き方である点に注意. つまり,transition: left .5s 1s;と書いてあった場合,1秒の遅延があった後にleftプロパティが0.5秒かけてアニメーションされる.


.box {
  transition: left .5s, transform .5s .5s;
  left: 0;
  transform: rotate(0);
}
#checkbox:checked ~ .box {
  left: 200px;
  transform: rotate(135deg);
}

これでチェックが付けば.boxは0.5秒かけて右へ200px動き,その後135度回転するようになった.

See the Pen CSS Transition! by Hideyuki Tabata (@seeker5084) on CodePen.

しかし！このCSSではチェックを外した時に,元の位置へ戻ってから回転する. わたしがやりたいことは回転してから元の位置へ戻すことなので,これでは回転と移動の順序が逆になっている. 次の章でアニメーションの逆再生を実現させよう.

チェックボックスの状態によってアニメーションを切り替える！

チェックを外した時にtransitionアニメーションが逆再生するようにするにはtransitionプロパティをもうひとつ追記する必要がある. このように...


.box {
  /* チェックが外れた時のアニメーション */
  transition: left .5s .5s, transform .5s;
  left: 0;
  transform: rotate(0);
}
#checkbox:checked ~ .box {
  /* チェックが付いた時のアニメーション */
  transition: left .5s, transform .5s .5s;
  left: 200px;
  transform: rotate(135deg);
}

ここで注意したい点はチェックが付いた時のアニメーション(transition)を:checkedの方に書くということ. わたしは:checkedの方にチェックが外れた時のアニメーションを記述してしまい混乱してしまった. チェックが付いた時点ですでに:checkedのスタイルが適用されるわけなので,こちらにチェックが付いた時のアニメーションを記述するようにしよう.

See the Pen CSS Transition Reverse! by Hideyuki Tabata (@seeker5084) on CodePen.

これで望む結果を得ることが出来た！ポイントはtransitionを2つ書くこと. :checkedの方にチェックが付いた時のアニメーションを記述することである. さて,最後にこのCSSの実用的な一例をご紹介しよう. それはハンバーガーメニューである.

See the Pen Hamburger Menu by Hideyuki Tabata (@seeker5084) on CodePen.

サンプルとしてご利用いただけるよう作り込んでしまったため余計なコードもいくつかあるが,注目していただきたい点はハンバーガーメニュー(画面左上)のアニメーションである. 3本線がX印になるまでのアニメーションに,今回ご紹介した逆再生テクニックを用いている. 他にもアイディア次第で様々な使いみちがありそうなので,こんな使いみちがあるよ！という方はコメントを残してもらえると嬉しいな💖

2340428567626726433 https://www.storange.jp/2018/06/csstransition.html https://www.storange.jp/2018/06/csstransition.html CSSだけでTransitionアニメーションを逆再生させる方法 2018-06-23T12:47:00+09:00 https://www.storange.jp/2018/06/csstransition.html Hideyuki Tabata Hideyuki Tabata

200 200

72 72