CSSのみで好きな画像をふわふわさせる（アニメーション）

こういうの。
一見めんどくさそうですが、CSSのみ、かつ短いコードで実装できます。

.shake-up {
    animation: shake-up 3s infinite ease-in-out;
}

@keyframes shake-up {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(15px);
    }
}

動きのスピードは3sの部分を変更することで調整可能です。数字が小さいほど早い。早すぎるとギャグになる
揺れの大きさ調整はtranslateY(15px);の数字を変更します。

横揺れもできます。

.shake-side {
    animation: shake-side 3s infinite ease-in-out;
}

@keyframes shake-side {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(50px);
    }
}

向かい風で前に進めないみたいでかわいいですね。