【CSS】スイングする画像をCSSで作ってみる！【CSSアニメーション】

今回はCSSを使って、振り子のようにゆれる画像を作ってみたいと思います！

最初に、ベースとなるCSSコードを紹介した後、カスタムパターンをいくつか紹介していきます。

なるべくコピペでも使えるように構成していますので、サンプルを見て気になるものがあれば、ぜひ試してみてください！

目次

ブログで使用する場合は

ご利用のブログがHTML記述に対応している場合は、紹介するCSSを<style>と</style>で囲んで記述してください。

※ CSS用の入力欄がある場合は<style>と</style>の囲みなしで記述してください。

HTMLコードについては、そのまま入力でＯＫです。

サイトにある既存の要素にCSSを適用する場合は、以下の記事を参考に、紹介するCSSのセレクタ部分を調整してください。

はてなブログの場合

以下の記事ではてなブログでCSSを使う方法をまとめています。

紹介する内容を、はてなブログで試す場合は、上記の記事を参考にしてください。

ベースコード

ベースとなるCSSは以下のような感じになります。

.swing-outer {
    zoom: 1;
}

.swing-outer:before, .swing-outer:after {
    content: "";
    display: table;
}

.swing-outer:after {
    clear: both;
}

.swing {
    animation: swing linear 4s infinite;
    transform-origin: center -20px 0;
    display: block;
    float: left;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

.swing img {
    border: 5px solid #f8f8f8;
    z-index: 2;
    display: block;
    width: 200px;
}

.swing:after {
    content: '';
    border: 1px solid #999;
    top: -10px;
    z-index: 0;
    left: 50%;
    width: 20px;
    height: 20px;
    border-bottom: none;
    border-right: none;
    transform: rotate(45deg);
    position: absolute;
}

.swing:before {
    content: '';
    top: -14px;
    z-index: 5;
    left: 54%;
    width: 5px;
    border-radius: 50% 50%;
    background: #000;
    height: 5px;
    position: absolute;
}

@keyframes swing {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(10deg);
    }
    50% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(-10deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

動作チェック

ベースコードの表示を確認しておきます。

以下のようなHTMLを記述することで、上述のCSSが適用されます。

<div class="swing-outer">
    <figure class="swing">
        <img src="https://i.gyazo.com/24651720407f47d0b9270d03deb195bf.png">
    </figure>
</div>

swingクラスを持った要素で囲まれたimg要素がスイングする写真のように表示されます。

また、swing-outerクラスを持った要素で囲んでおかないと、表示がくずれる場合があるので、必ずswing-outerクラスを持った要素で囲んで使用してください。

実際の表示は、以下のような感じになります。

カスタムパターン

画像のサイズを変えてみる！

まずは、画像のサイズを調整してみたいと思います。

ベースコードに、以下のようなCSSコードを追加してください。

.swing.width-100px img {
    width: 100px;
}

.swing.width-100px:before {
    left: 57.5%;
}

.swing.width-200px img {
    width: 200px;
}

.swing.width-200px:before {
    left: 54%;
}

.swing.width-300px img {
    width: 300px;
}

.swing.width-300px:before {
    left: 52.6%;
}

ここでは、画像の幅が100px、200px、300pxの３つのパターンを追加してみました。

swingクラス内のimg要素のwidthプロパティで画像の幅を調整しています。

swingクラスの:before要素のleftプロパティは、画像の上にあるピン（黒丸）の位置を調整しています。

カスタムする場合は、img要素のwidthで幅を決めた後、:before要素のleftでピンの位置を微調整してください。

実際に表示して確認してみます。

<div class="swing-outer">
    <figure class="swing width-100px">
        <img src="https://i.gyazo.com/24651720407f47d0b9270d03deb195bf.png">
    </figure>
    
    <figure class="swing width-200px">
        <img src="https://i.gyazo.com/24651720407f47d0b9270d03deb195bf.png">
    </figure>
    
    <figure class="swing width-300px">
        <img src="https://i.gyazo.com/24651720407f47d0b9270d03deb195bf.png">
    </figure>
</div>

表示は以下のような感じになります。

スイングスピードをカスタムしてみる！

次に、スイングスピードをカスタムしてみます。

以下のようなCSSコードを追加してください。

.swing.cycle-2s {
    animation-duration: 2s;
}

.swing.cycle-4s {
    animation-duration: 4s;
}

.swing.cycle-6s {
    animation-duration: 6s;
}

.swing.cycle-8s {
    animation-duration: 8s;
}

animationの周期（duration）を調整して、スイングスピードをカスタムしています。

実際に表示して確認してみます。

以下のようなHTMLを記述してみてください。

<div class="swing-outer">
    <figure class="swing cycle-2s">
        <img src="https://i.gyazo.com/24651720407f47d0b9270d03deb195bf.png">
    </figure>
    <figure class="swing cycle-4s">
        <img src="https://i.gyazo.com/24651720407f47d0b9270d03deb195bf.png">
    </figure>
    <figure class="swing cycle-6s">
        <img src="https://i.gyazo.com/24651720407f47d0b9270d03deb195bf.png">
    </figure>
    <figure class="swing cycle-8s">
        <img src="https://i.gyazo.com/24651720407f47d0b9270d03deb195bf.png">
    </figure>
</div>

表示は以下のような感じになります。

スイングの角度を変えてみる！

続いて、スイングの角度を変えてみたいと思います。

ベースコードに、以下のようなCSSコードを追加してください。

.swing.angular-5deg {
    animation-name: swing-5deg;
}

@keyframes swing-5deg {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(5deg);
    }
    50% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.swing.angular-10deg {
    animation-name: swing-10deg;
}

@keyframes swing-10deg {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(10deg);
    }
    50% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(-10deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.swing.angular-20deg {
    animation-name: swing-20deg;
}

@keyframes swing-20deg {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(20deg);
    }
    50% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(-20deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.swing.angular-40deg {
    animation-name: swing-40deg;
}

@keyframes swing-40deg {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(40deg);
    }
    50% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(-40deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

各角度ごとにアニメーションを定義しています。

少し長いですが、それぞれ、25%と75%のタイミングでの角度を調整しています。

これにより、左右の振れ幅を調整しています。

実際に表示して確認するために、以下のようにdivタグを調整してみてください。

<div class="swing-outer">
    <figure class="swing angular-5deg">
        <img src="https://i.gyazo.com/24651720407f47d0b9270d03deb195bf.png">
    </figure>
    <figure class="swing angular-10deg">
        <img src="https://i.gyazo.com/24651720407f47d0b9270d03deb195bf.png">
    </figure>
    <figure class="swing angular-20deg">
        <img src="https://i.gyazo.com/24651720407f47d0b9270d03deb195bf.png">
    </figure>
    <figure class="swing angular-40deg">
        <img src="https://i.gyazo.com/24651720407f47d0b9270d03deb195bf.png">
    </figure>
</div>

実際の表示は、以下のような感じになります。

マウスオーバー時にスイングを止めてみる！

次に、マウスオーバー時にスイングを止めてみたいと思います。

ベースコードに、以下のようなCSSコードを追加してください。

.swing.pause-at-hover:hover {
  animation-play-state: paused;
}

animation-play-stateプロパティにpausedを指定すると、アニメーションが一時ストップします。

ここではホバー時に指定をしているので、画像にマウスを合わせたときにアニメーションがストップします。

実際に表示して確認してみます。

<div class="swing-outer">
    <figure class="swing pause-at-hover">
        <img src="https://i.gyazo.com/24651720407f47d0b9270d03deb195bf.png">
    </figure>
</div>

表示は以下のような感じになります。

マウスオーバー（スマホの場合はタップ）してスイング止まるか確認してみてください。

カスタム内容を組み合わせてみる！

ここまで追加したカスタム内容は組み合わせて使用することができます。

最後に、いくつか、ここまで紹介した内容を組み合わせたサンプルを紹介したいと思います。

以下のように、HTMLを記述してみてください。

<div class="swing-outer">
    <figure class="swing width-100px cycle-2s angular-5deg pause-at-hover">
        <img src="https://i.gyazo.com/24651720407f47d0b9270d03deb195bf.png">
    </figure>
    <figure class="swing width-200px cycle-4s angular-10deg pause-at-hover">
        <img src="https://i.gyazo.com/24651720407f47d0b9270d03deb195bf.png">
    </figure>
    <figure class="swing width-300px cycle-6s angular-20deg pause-at-hover">
        <img src="https://i.gyazo.com/24651720407f47d0b9270d03deb195bf.png">
    </figure>
</div>

表示は以下のような感じになります。

他の組み合わせも、もちろん可能です。

自分でカスタムしたものも含めて、いろいろ組み合わせて試してみてください！

まとめ

今回はCSSを使って、振り子のようにゆれる画像を作ってみました。

CSSが利用可能なサイトであれば、今回紹介した内容を使用することができます。

画像のサイズやスイングスピードの調整は比較的簡単にカスタムできるので、いろいろいじって遊んでみてください！

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ