《CSS》アニメーションでふわふわ動かす

公開日：2023年10月03日　最終更新日：2024年2月27日

CSS

CSSアニメーションで要素をふわふわ動かします。

DEMO

HTML

<img src="https://placehold.jp/150x150.png"  class="fluffy">

CSS

animation: アニメーションの長さ、アニメーションの遅延、キーフレームアニメーションの名前、アニメーションのタイミング関数、アニメーションの繰り返し回数

.fluffy {
	animation: 4s 0s fluffy ease-in-out infinite;
}
@keyframes fluffy {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(20px);
	}
}