はじめに

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

方法

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

HTML

<imgscr="○○○"class="####">

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

CSS

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

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

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