ふわふわと浮いているように見えるアニメーション

ふわふわ

CSSアニメーションの練習として実装しました。
最近良いなと思ったWebサイトでふわふわと画像が浮いているのが素敵だなと思ったのがきっかけです。
色々応用もできそうなので試してみます。

<div class="c-block">
    <p>ふわふわ</p>
</div>
<!-- [/c-block] -->

.c-block {
  width: 300px;
  margin-inline: auto;
  margin-top: 60px;
  aspect-ratio: 1/1;
  display: grid;
  place-content: center;
  background-color: lightgray;
  border-radius: 50%;
  animation: float 1s infinite alternate-reverse;
}

@keyframes float {
  0% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(20px);
  }
}