CSSアニメーション基礎編を勉強してみた
CSSアニメーションについて勉強したのでまとめ。
Mozillaさんがまとめてくれてたのでこれに従って勉強しました。
以下、見出しはMozillaの記事に合わせてます。
文字列がブラウザのウィンドウを横切る
以下のようなことが分かりました。
@keyframe XXXという行でアニメーションに名前をつけて、
animation-nameでそれを使うとアニメーションしてくれる模様- keyframe内のfrom, toでアニメーション前後のcssが定義できる模様
ほぼそのままですがコード書いてみました。
See the Pen CSS Animation - slidein(from right to left) by HIROMITSU Daisuke (@daisuke718) on CodePen.
ちなみに最初keyframe内のwidth指定いらないんじゃないかと思ったんですが、必要でした。
100%だとfromのタイミングで画面外に出られずに文字列が縦に並んだ状態になってしまいます。
キーフレームを追加する
これ、MozillaのCodePenの内容は間違いでした。
パーセントはkeyframe内に書くと以下のように途中で大きくなって終わるに従って元のサイズに戻ってくれます。
See the Pen CSS Animation - slidein(from right to left) by HIROMITSU Daisuke (@daisuke718) on CodePen.
アニメーションを繰り返す
上記にanimation-iteration-count: infinite;を加えただけで永遠に繰り返してくれます。
See the Pen CSS Animation - slidein(from right to left) + font-size change + infinite loop by HIROMITSU Daisuke (@daisuke718) on CodePen.
前後に移動させる
これも上記にanimation-direction: alternate;を加えるだけです。
スライドインとスライドアウトを繰り返すようになりましたね！
See the Pen CSS Animation - slidein(from right to left) + font-size change + infinite loop + alternate by HIROMITSU Daisuke (@daisuke718) on CodePen.
まとめ
あとjsでアニメーションイベント拾うとかありますけど、それはまたの機会に。
繰り返しとか逆再生とか意外と簡単にできていい感じです。
今回のを応用するとスライドインだけでなく他にもいろいろできそうですね。
左から右へのスライドインもやってみようかと思ったけど難しかったのでこれもまたの機会に。
