cssのkeyframesを使って要素に動きや変化をアニメーションでつける

cssで要素に動きや変化をアニメーションでつける、keyframesの使い方

keyframesの使い方
animation-nameプロパティでアニメーションを指定する
アニメーションの動作時間や動きなどの詳細を指定する
keyframesのサンプル

css関連記事

keyframesの使い方

css

@keyframes animation_test {
    0% {
        width:100px;
    }
    100% {
        width:200px;
    }
}

animation_testがアニメーションの名前を任意でつけます。
あとでこれを適用する要素にcssでアニメーションの名前で動き方を呼び出します。

波括弧{}の中にwidth:100px;などに適用させるプロパティを記述していきます。
%の値は0%～100%の間でどのくらいのタイミングで変化させるかで決めていきます。
この場合、開始時は100px、終了時に200pxに変化するということです。

animation-nameプロパティでアニメーションを指定する

css

@keyframes animation_test {
    0% {
        width:100px;
    }
    100% {
        width:200px;
    }
}

.keyframe_test {
    animation-name: animation_test;
}

さっき作った@keyframes animation_testを要素に適用します。
通常の書き方のように、属性に対してanimation-nameプロパティで作成したアニメーション名を指定します。
これで要素とアニメーションがひも付きました。

アニメーションの動作時間や動きなどの詳細を指定する

css

.keyframe_test {
    animation-name: animation_test;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
}

animation-durationでアニメーション開始から終了までにかかる時間を指定します。この場合、1.5秒でアニメーションします。

animation-timing-functionで変化の度合いを指定をします。値はease-inやlinearなどイージングで使用する値で指定します。任意で作成したい場合はcubic-bezierで指定します。

animation-iteration-countで繰り返しの回数を指定します。ずっと動かしたいときはinfiniteで指定します。

animation-directionで動きの繰り返し方を指定します。値にalternateを指定すると0%から100%まで変化し、100%から0%に変化するようになります。

他にもプロパティはありますので必要に応じて調べてみてください。
同じような動きをする要素に共通のclass名で指定しておき、それぞれの動きを指定するときに上書きしていくと楽っぽいですね。