CSSアニメーションでアイコンを動かす

CSSを使ってアニメーション
使い方
サンプル①　左右にゆっくり揺れるアニメーション
サンプル②　上下にバウンドするアニメーション

CSSを使ってアニメーション

CSSアニメーションを使うことで、ちょっとした動きのあるページをつくることができます。

使い方

@keyframesでどのように動かすか記載します。アニメーション開始を0％、終了を100％としてそれぞれに変化させたい処理を書いていきます。〇〇%を細かく指定することで、より細かい動きを指定することができます。

「animation-name」のところは好きな名前にします。

@keyframes animation-name {
    0% {
        開始の場所
    }
    100% {
        終了の場所
    }
}

@keyframesで書いた内容で動くように、CSSアニメーションでどんなふうに何秒かけて動くかや、何回繰り返すかなどを指定していきます。

.animation {
    animation: animation-name; //@keyframeと同じ名前を入れる
    animation-duration: 3s; //開始から終了まで何秒かけるか
    animation-timing-function: linear; //繰り返す回数 (infinite：無制限)
    animation-iteration-count: infinite; //開始から終了までのスピード変化 ( linear : 開始から終了まで一定)
}