《CSS》アニメーションで要素をふわっと拡大させる

公開日：2025年06月25日　最終更新日：2025年7月16日

CSS

CSSアニメーションを使用して、要素を「拡大・元に戻る」をループさせます。
視覚的に目立たせたい時に効果的です。

DEMO

HTML

<img src="https://blog.grinee.net/demo/images/circle.png" class="puff">

CSS

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

.puff {
	animation: 4s 0s puff ease-in-out infinite;
}
@keyframes puff {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.25);
	}
}

Ad