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

公開日：2023年10月03日　最終更新日：2025年1月28日

CSS

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

DEMO

HTML

<img src="https://blog.grinee.net/demo/images/circle.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);
	}
}

Ad