CSSだけで画像などの要素を上下にふわふわ動かす

はじめに

CSSとHTMLだけで、要素（画像など）を縦にフワフワと動かしてみます。
下記参考ページの「一番上のスマートフォン」のような動きが可能です。
【参考】
https://www.ana.co.jp/ja/jp/amc/promo/app-service/

方法

動かしたい要素のclassに任意の文字列を設定します。
この場合は「img scr="○○○"」に対して、classを設定します。

HTML

index.html

<img scr="○○○" class="####">

その任意の文字列に以下のコードを設定

CSS

style.css

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

「####」に対して設定した「animation-name」内の「▲▲▲▲」に対して、以下をCSSに記入

CSS

style.css

@keyframes ▲▲▲▲ {
    0% {
        transform: translate(0,0px);
    }

    100% {
        transform: translate(0,-15px)
    }
}

以上で要素「img scr="○○○" class="####"」が上下にフワフワ動きます。

ぜひお試しください！

参考リンク

以下の記事もご参考にどうぞ。

・cssのkeyframesで要素に動きや変化をアニメーションでつけるサンプル
http://mugen00.moo.jp/web/css/keyframes-sample