【CSSアニメーション】要素を「ふわふわ」動かす方法を解説します。

なやむくん

要素をふわふわさせたい。

なやむさん

ふわふわさせるアニメーションの実装方法を知りたい。

などの疑問や悩みを解決してまいります。

ふわふわした動きは正直頻繁に使われるものではありませんが、デザインによってはユーザーに視覚的好印象なアニメーションとなります。

もちらんJSは不要でHTMLとCSSのみ使用していきますので、JSが苦手な方も簡単に実装ができます。

今回はHTMLとCSSのみ使用してふわふわしたアニメーションの実装方法を解説していきます。

本記事の目次

1 完成例を見てみましょう
2 HTMLコードの解説
3 CSSコードの解説
- 3.1 animationプロパティを使用してアニメーションの設定を一括指定する
- 3.2 縦のふわふわにはtranslateY()関数、横のふわふわにはtranslateX()関数を指定
4 本記事のまとめ

完成例を見てみましょう

以下がふわふわアニメーションを実装した完成例です。

See the Pen ふわふわアニメーション by koutarou mori (@koutarou-mori) on CodePen.

このように縦にふわふわ、横にふわふわのアニメーションを実装しました。

上下左右に動く幅やスピードはお好みで調整していただけたらと思います。

それではコードを解説していきます。

HTMLコードの解説

使用したHTMLコードは以下です。

<div class="element fuwafuwa01">縦にふわふわ</div>
<div class="element fuwafuwa02">横にふわふわ</div>

今回はfuwafuwa01クラスとfuwafuwa02クラスをふわふわアニメーション用として使用しています。

なのでふわふわさせたい要素のクラスに指定することでアニメーションを実装することができます。

このクラスにふわふわアニメーションのCSSを指定していきます。

CSSコードの解説

使用したCSSコードは以下になります。

body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 60px;
    height: 100vh;
    margin: 0;
}

.element {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: #fff;
    width: 200px;
    height: 200px;
    background-color: #3498db;
    border-radius: 100%;
}

/* ふわふわアニメーションここから */
/* 縦のふわふわ指定 */
.fuwafuwa01 {
    animation: fuwafuwa01 2s infinite ease-in-out;
}
/* 横のふわふわ指定 */
.fuwafuwa02 {
    animation: fuwafuwa02 2s infinite ease-in-out;
}
/* 縦のふわふわの動き */
@keyframes fuwafuwa01 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(30px);
    }
}
/* 横のふわふわの動き */
@keyframes fuwafuwa02 {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(30px);
    }
}
/* ふわふわアニメーションここまで */

bodyタグとelementクラスに指定しているCSSはレイアウトに関するものなどで無視していただいて大丈夫です。

今回着目していただきたいCSSコードは以下になります。

/* ふわふわアニメーションここから */
/* 縦のふわふわ指定 */
.fuwafuwa01 {
    animation: fuwafuwa01 2s infinite ease-in-out;
}
/* 横のふわふわ指定 */
.fuwafuwa02 {
    animation: fuwafuwa02 2s infinite ease-in-out;
}
/* 縦のふわふわの動き */
@keyframes fuwafuwa01 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(30px);
    }
}
/* 横のふわふわの動き */
@keyframes fuwafuwa02 {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(30px);
    }
}
/* ふわふわアニメーションここまで */

これらのコードについて解説していきます。

animationプロパティを使用してアニメーションの設定を一括指定する

/* ふわふわアニメーションここから */
/* 縦のふわふわ指定 */
.fuwafuwa01 {
    animation: fuwafuwa01 2s infinite ease-in-out;
}
/* 横のふわふわ指定 */
.fuwafuwa02 {
    animation: fuwafuwa02 2s infinite ease-in-out;
}

上記の箇所のコードは、アニメーションの内容を設定するのにanimationプロパティで一括指定しています。

今回一括で指定している内容は、アニメーションの名前、再生時間、再生回数、再生の変化する速度の設定を行っています。

animationプロパティは以下のように一括指定することが可能です。

	animation: ①name ②duration ③timing ④delay ⑤iteration ⑥direction ⑦fill ⑧play;

また一括指定しない場合は以下のように記述することで同じ内容になります。

/* 一括指定 */
animation: fuwafuwa01 2s infinite ease-in-out;

/* 一括指定の内容と同じ */
animation-name: fuwafuwa01; /* アニメーションの名前 */
animation-duration: 2s; /* アニメーションの再生時間 */
animation-iteration-count: infinite; /* アニメーションの再生回数 */
animation-timing-function: ease-in-out; /* アニメーションが変化する速度 */

よろこびくん

記述量が全然違いますね！

みつた

一括指定の書き方が分かればこちらの方がいいかもですね。

それぞれのアニメーションに関するCSSは以下の記事でも解説しています。

縦のふわふわにはtranslateY()関数、横のふわふわにはtranslateX()関数を指定

次に@keyframesの中身について解説していきます。

縦のふわふわ、横のふわふわはそれぞれtranslate()関数を使用して要素を動かしています。

/* 縦のふわふわの動き */
@keyframes fuwafuwa01 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(30px);
    }
}
/* 横のふわふわの動き */
@keyframes fuwafuwa02 {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(30px);
    }
}

縦の動きにはtranslateY()関数、横の動きにはtranslateX()関数を指定しています。

みつた

縦はY軸、横はX軸なので縦のふわふわはtranslateY()関数、横のふわふわにはtranslateX()関数を指定しています。

それぞれ始まりと終わりには元の位置にあってほしいので、0%と100%には引数に「0」を指定しています。

そして今回は30pxほどの動きをつけたかったのでtranslateY()関数、translateX()関数の引数に「30px」を指定しています。

みつた

ここの数値はお好みでOKです！