Travelogue

CSSだけで要素をフワフワ動かす方法と使いどころ

公開日：

CSSだけで要素をフワフワ動かす方法をご紹介します。
Webページにおいて動きというのは必須ではないですが、動きも含めたデザインができるのがWebページの特徴でもあり、うまく使えば効果的に働いてくれます。
動かすスピードや振れ幅によって受ける印象が大きく異なりますので、使いどころをしっかり見極めて動きも含めたデザインをすることが大事です。

まずは動きの振れ幅が小さめにしてみます。
これだとコミカルな印象がありますよね。
例えば、ページのローディング画面に表示させる「ロード中」みたいな画像をコミカルにフワフワさせる時にちょうどいいんじゃないかと思います。また、振れ幅は小さめでも動きが早くて意外と目を引きますので、ユーザーに押してほしいキャンペーンのバナーやボタンにも使えそうです。

FuwaFuwa

下記のCSSコードの2行目から13行目は見た目の設定ですので、動きとは直接関係ありません。
つまり動かす時に必要な部分はそれ以外の数行だけなのでシンプルで使いやすいです。

<div class="sample_1">FuwaFuwa</div>

.sample_1 {
    width: 200px;
    height: 200px;
    line-height: 200px;
    background-color: #222;
    color: #fff;
    text-align: center;
    font-family: sans-serif;
    font-size: 15px;
    font-weight: bold;
    border-radius: 50%;
    letter-spacing: 4px;
    margin: 40px auto;
    animation: fuwafuwa_1 .5s ease 0s infinite;
}

@keyframes fuwafuwa_1 {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(0, -4%);
    }
    100% {
        transform: translate(0, 0);
    }
}

次はCSSを少しだけ変更して、振れ幅を広めに、スピードをゆっくりに調整してみました。
上のコミカルな動きとはうって変わってゆったり落ち着いた雰囲気があります。
この動きだとおそらくあまり目立たないので、例えばメインビジュアル上で重ねた要素をループして微妙に動かしておくとか、ビジュアル的なこだわりのひと工夫に使ってみるのも良さそうです。

FuwaFuwa

CSSの見た目の設定部分は上のものと同じなので省略します。

<div class="sample_2">FuwaFuwa</div>

.sample_2 {
    animation: fuwafuwa_2 5s ease 0s infinite;
}

@keyframes fuwafuwa_2 {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(0, -15%);
    }
    100% {
        transform: translate(0, 0);
    }
}
Pagetop