僕とCSS Animation

最近CSS Animationに入門しています。僕は普段セキュリティに興味があり、大学でチームを組んでCTFに参加したり、大学院の研究対象にはマルウェアを選択しています。
そんな僕がなぜCSS Animationに入門したのかというと、きっかけはCSS Animationの個人サイトを運営している@yui540さんという方の作品を見たことでした。
youtubeでCSS Animationを使った演出講座（ https://www.youtube.com/watch?v=wFJ8WB4G4KM ）をやられていたのが面白そうで、それを観ながら僕もやってみたのが始まりでした。

CSSを利用したアニメーションの例

CSSでアニメーションさせる方法としては大きく2つ、CSS TransitionとCSS Animationがあります。
CSS Transition とCSS Animationには以下のような違いがあります。
CSS Transition … CSS プロパティが変化するときに、アニメーションの効果をつけることができる (ユーザーの操作によって変化する)
CSS Animation … キーフレームを用いて開始(0%)から終了(100%)までの任意の地点で動きを指定することができる (ユーザーの操作によって変化しない)

では具体的にどういう場所で使うことができるのでしょうか？
CSS Transition … ボタンにマウスが乗せられたとき、スマホのメニューを開閉したときなど
CSS Animation … ページ読み込み中やステータスバーのアニメーションなど

例えば以下のサイトではCSS Transitionを使用してマウスをhoverした時の動きをアニメーションさせています。
http://www.webopixel.net/lab/sample/13/1028css3-onepoint/

CSS Animationの例としては、下記のサイトのようなローディングの表現があります。
http://tobiasahlin.com/spinkit/

ローディングのようなCSS Animationを極めると、冒頭で紹介した@yui540さんの作品のようにもっと表現の幅が広がります。

6月18日は「由比ヶ浜結衣」の誕生日です🎂
なので、css animationで由比ヶ浜結衣をお祝いするサイトを作りました（非公式）
HAPPY BIRTHDAY YUI!!!!!

🎂 https://t.co/SkCpwVRrir 🎂#俺ガイル #由比ヶ浜結衣生誕祭2018 pic.twitter.com/ifqTsoOAZW

— yui540 (@yui540) June 17, 2018

今回は、基本的なアニメーションとしてスライドショーに使えそうなCSS Animationを紹介します。

スライドショーに使えそうなCSS Animationを作ってみる

今日は、CSS Animationに入門したての初心者の僕がスライドショーに使えそうなアニメーションを４つ作ってみたので、紹介していきます。
なんでスライドショーなのかというと上述した@yui540さんの講座で画像のスライドショーっぽいものを作っていて、僕が最初に作ったCSS Animationでもあるからです。
CSS Animationにおいては、最終的にanimationプロパティでアニメーションの間隔を全て決めていくので、animationプロパティに注目してコードを見てみるとわかりやすいと思います。

※以下4つのアニメーション、PC上で見ないと正しく動作していないものがあるので、PCで見ることを推奨します…申し訳ありません

1. 左→右、上→下 に画像が切り替わる

※画像が大きいために見づらいので、Resultだけ表示してみてください

See the Pen EJ blog CSS Animation1 by yyy (@ywkw1717) on CodePen.

1つ目は単純にwidthを0%から100%へ、heightも0%から100%へすることで、横縦横縦という風に遷移させています。imageクラスにはwidthを0％で指定していますが、それを後述のwidth: 100%で偶数番目を上書きしています。
あとはwidthとheightをそれぞれ100％にするキーフレームを作成してanimationプロパティで使うだけです。

2. 画像が四等分されてから切り替わる

See the Pen EJ blog CSS Animation2 by yyy (@ywkw1717) on CodePen.

冒頭でご紹介したyoutube講座では最後にdiv要素4つを使って横へスライドさせていましたが、そこからヒントを得て、左右へdiv要素をスライドさせてスライドショーをやってみようと思います。
今回キーフレームは6つあります。左側に退避させてあるdiv要素を右へスライドさせるslide-rightとそれをリセットするreset-slide-right、右側に退避させてあるdiv要素を左へスライドさせるslide-leftとそれをリセットするreset-slide-left、opacityを0にさせてある要素を表示させるshow-content、opacity1の要素を0にして消すdisappearです。

div1とdiv3は左に、div2とdiv4は右にtranslateXで退避させておきます。
アニメーションはまず画像の一枚目をshow-contentで表示するところから始まります。次に、slide-right(div1) -> slide-left(div2) -> slide-right(div3) -> slide-left(div4)で画像を消し、その後次の画像を表示するための準備としてdisappearで見えている画像を消し、reset-slide-right(div1) -> reset-slide-left(div2) -> reset-slide-right(div3) -> reset-slide-left(div4)で4つのdiv要素を元の位置に戻しています。
その後はまたshow-contentで二枚目の画像を表示して、divをスライドさせて消す、ということの繰り返しです。

3. 右上から徐々に消えていく画像

See the Pen EJ blog CSS Animation3 by yyy (@ywkw1717) on CodePen.

3つ目はdivを使って斜めから画像を消していくスライドショーです。2つ目のスライドショーよりdiv要素を2つ増やしていて、6つのdivを囲っているpaintクラスの位置も斜め左上へと調整しています。
また、各div要素の長さ(width)も少し長くしていて、div要素のtransformプロパティにはrotateを使って回転させています。そんな感じで、うまい具合に画像が消えてくれる位置やdivの長さを探りました。
今回のキーフレームは4つです。slide-rightというのはtranslateX(-100%)のものをtranslateX(0%)にすることで、左上からdivが伸びていき画像が消えるようになります。reset-slide-rightはこのdivを元に戻すもので、show-contentとdisappearは2つ目のスライドショーと同じです。
あとは、show-contentで画像を表示させてslide-rightで見え無くし、disappearで画像を消してからreset-slide-rightでdivを元の位置に戻す、という流れを繰り返すだけです。

4. 中央から円が広がっていき画像が切り替わる

See the Pen EJ blog CSS Animation4 by yyy (@ywkw1717) on CodePen.

4つ目は円を使ってスライドショーさせてみました。
正円を徐々に大きくさせて画像を消していきます。divは1つに減らしていて、paintクラスとdivの位置をうまく調整して円が中央から始まるようにしています。
キーフレームは今回も4つで、show-circleは円を表示させて画像を覆う役割を、hide-circleは円を消し、あとは例によってshow-contentとdisappearがあるだけです。show-contentで画像を表示、show-circleで画像を覆って見えなくし、disappearで画像を消す、最後にhide-circleで円をリセット、これを繰り返すだけです。

最後に

いかがだったでしょうか？
CSSをｼｭｯと書けるようになりたいなぁと思って今年のGWにちょこっと書き始め、つい最近CSS Animationを触りだした初心者の僕ですが、CSS Animationに限らずアニメーションの分野って本当に奥が深くて、アイデア次第で表現は大幅に広がるし、いろんな可能性があると思っています。また、自分の思い描いていた動きが表現できた時の快感は忘れられないです。
今回書いた4つのCSS Animationも、速度を変えるだけで見え方が全く変わってきますし、可能性は無限大です。
是非、少しでも興味を持った方は挑戦してみてください！