【CSS】要素がゆらゆらと揺れるアニメーション（animation、transform、keyframes）

2022.7.21

【CSS】要素がゆらゆらと揺れるアニメーション（animation、transform、keyframes）

今回はanimation、transform、keyframesでゆらゆらと揺れるアニメーションの実装をご紹介します。

HTMLの記述

<img src="../img/smile.jpg">

CSSの記述

img {
    animation: shake 2s infinite;
    transform: rotate(20deg);
}

@keyframes shake {
    50% {
        transform: rotate(-20deg);
    }

    100% {
        transform: rotate(20deg);
    }
}

解説

0%は記載していませんが、元の状態（時計回りに20度傾いている）から、
50%で反時計回りに20度まで回転、100%で元の状態まで回転を指定。
これを繰り返すことで左右にゆらゆらと揺れるアニメーションになります。
下記の様な書き方でも同じです。

img {
    animation: shake 2s infinite;
}

@keyframes shake {
    0% {
        transform: rotate(20deg);//時計回りに20度傾いた状態からスタート
    }
    50% {
        transform: rotate(-20deg);//反時計回りに20度まで回転
    }
    100% {
        transform: rotate(20deg);//時計回りに20度の位置まで回転
    }
}

実装結果

<br /> See the Pen <a href="https://codepen.io/Uchaaan/pen/BarRaBg"><br /> 要素がゆらゆらと揺れるアニメーション（transform）</a> by Uchaaan (<a href="https://codepen.io/Uchaaan">@Uchaaan</a>)<br /> on <a href="https://codepen.io">CodePen</a>.<br />

アクセントで使うとカワイイですね。
是非使ってみてください。