《CSS》アニメーションでバウンドさせる

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

CSS

CSSアニメーションで要素をバウンドさせます。

DEMO

HTML

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

CSS

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

.bound {
	animation: 4s 0s bound ease-in infinite;
}
@keyframes bound {
	79%,
	90%,
	97%,
	100% {
		-webkit-transform: translate(0);
		        transform: translate(0);
	}
	85% {
		-webkit-transform: translateY(-20px);
		        transform: translateY(-20px);
	}
	94% {
		-webkit-transform: translateY(-4px);
		        transform: translateY(-4px);
	}
	99% {
		-webkit-transform: translateY(-2px);
		        transform: translateY(-2px);
	}
}

Ad