CSSアニメーションちょっとやってみた

CSSアニメーションちょっとやってみた、ということで全く手をつけた経験のないCSSアニメーションをやってみました。

CSS アニメーション | MDN

そういうことはMDNに聞いてみるに限る。

See the Pen JEroOY by Taiyaki (@taishi41228) on CodePen.

簡単なアニメーションを実装しました。

animation-durationにアニメーションの継続時間、animation-nameにアニメーションの識別名を記述します。

@keyframes アニメーションの識別名という形式でアニメーションのキーフレームを設定していきます。

animation-iteration-countにアニメーションのループ回数、animation-directionにalternateを設定すると元の位置までアニメーションで戻る。

CSSアニメーションに必要なコードはたったこれだけ。こんなに簡単だとは思ってなかったなあ。でも、何か忘れている気がするんですが。トランジションだっけ、何が違うの。