@keyframesを使ってゆらゆらアニメーション

2021/01/25 HTML/CSS

はじめまして、こんにちは！
WEB勉強中5カ月目の中の人です。
デザインのことやWEBのこと、おもしろそう！と思ったことを発信していきます！

今回は@keyframesを使って、かわいいカエルのイラストをゆらゆら動かしてみたいと思います。@keyframesは、要素のアニメーションの開始～終了までを細かく指定することができます。

まずはじめに記述の仕方

アニメーション開始を0％、終了を100％としてそれぞれに変化させたい処理を書いていきます。
さらに20％、55％、88％など細かい区切りでも指定できるのでトランジションを使うより
詳細に動きを出すことが可能です。
●●●●●●には、アニメーションの任意の名前を入れます。

@keyframes ●●●●●● {
    0% {
        やりたい処理
    }
    100% {
        やりたい処理
    }
}

animationと一緒につかう

＠keyframesでやりたい処理を書いただけではアニメーションしてくれないので、animationを使ってどんなふうに、何秒かけて～などの指定をしてあげます。
そのとき先ほどの@keyframesでつけた名前●●●●●●と同じものを入れてあげます。

動かしたい場所class 名など {
    animation-name: ●●●●●●; // アニメーションの任意の名前、@keyframe と同じ名前を入れる
    animation-duration: 3s; // 何秒かけるか
    animation-timing-function: linear; // 再生する回数 ( infinite：無制限)
    animation-iteration-count: infinite; // 変化のスピード感 ( linear : 開始から終了まで一定)
}

上記をまとめてかくと {
    animation: ●●●●●● 3s linear infinite;
}

使い方の例～四角をのばしてみる～

幅100px の四角をぐーんと500px までのばしてみます。

shikakuというclassを用意し、幅100px 高さ100px 緑色に指定。2秒かけて繰り返しアニメーションさせます。アニメーションの名前は「sample」としておきます。
@keyframesで「sample」に対して、アニメーション開始時 → 幅100pxアニメーション終了時 → 幅500pxに指定します。

See the Pen yLawKXz by adatype (@adatype) on CodePen.

上記のように＠keyframesとanimationを別々で指定してあげるとのびる四角のアニメーションができました。

イラストを左右にゆらゆらさせてみる

カエルのイラスト画像にclass 名「frog」をつけました。そこに対してanimationと@keyframesの指定していきます。transform-originでカエルの足を原点に指定し、@keyframesに左右にゆらゆらさせる指定をします。
アニメーションの名前は「yurayura」としました。

See the Pen RwGdMBP by adatype (@adatype) on CodePen.

rotateの値を大きくすれば、カエルの揺れ具合を調整できます。何個か画像を組み合わせてそれぞれ動き方も調整すればよりいい感じのものができそうです。