回転しながら落下するCSSアニメーションサンプル

2022-06-25CSS アニメーション サンプル集,CSS

CSSで要素が回転しながら落下するアニメーションのCSSサンプルです。

ひとつの要素が回転落下するパターンと、複数の要素が回転落下するパターンを紹介しています。

回転しながら落下するCSSアニメーション（ひとつ）

要素が回転しながら落下するCSSアニメーションの動作サンプルとサンプルコードになります。

このサンプルでは落下する要素にテキストを利用していますが画像でも図形でも大丈夫です。

See the Pen CSS Rotating and falling animation 2 by yochans (@yochans) on CodePen.

HTMLではコンテナとなる要素に「container」というclass名を付けています。

落下する要素は<span>タグで設置しています。

<div class="container">
	<span>S</span>
</div>

コンテナ要素には「overflow: hidden;」で要素がはみ出ている状況では非表示にしています。

アニメーションのKeyframe名は「rotating-and-falling-anim」としています。

「position: absolute;」で位置を絶対値で指定するようにし、落下する要素の高さは「transform: translateY(-100px);」としてコンテナの上に指定しています。

.container {
	position: relative;
	font-size: 35px;
	height: 200px;
	font-weight: bold;
	color: #00bfff;
	background-color: #000;
	overflow: hidden;
}

.container span {
	position: absolute;
	left: 45%;
	transform: translateY(-100px);
	animation: rotating-and-falling-anim 2s linear infinite;
}

/* animation */
@keyframes rotating-and-falling-anim {
	0% {
		transform: translateY(-100px) rotate(0);
	}
	100% {
		transform: translateY(200px) rotate(720deg);
	}
}

回転しながら落下するCSSアニメーション（複数）

複数の要素が回転しながら落下するアニメーションの動作サンプルとCSSコードになります。

このサンプルでは落下する要素にテキスト（数字）を利用していますが画像でも図形でも大丈夫です。

See the Pen CSS animation with wavy text by yochans (@yochans) on CodePen.

HTMLでは<span>タグで複数の要素を設置しています。

<div class="container">
	<span>5</span>
	<span>6</span>
	<span>2</span>
	<span>4</span>
	<span>9</span>
	<span>1</span>
	<span>0</span>
	<span>8</span>
	<span>3</span>
	<span>7</span>
</div>

擬似クラス「nth-child(ｎ)」で要素毎の配置と落下するタイミングを調節しています。

.container {
	position: relative;
	font-size: 35px;
	height: 200px;
	font-weight: bold;
	color: #00bfff;
	background-color: #000;
	overflow: hidden;
}

.container span {
	position: absolute;
	left: 5%;
	transform: translateY(-100px);
	animation: rotating-and-falling-anim 2s linear infinite;
}

/* animation */
@keyframes rotating-and-falling-anim {
	0% {
		transform: translateY(-100px) rotate(0);
	}
	100% {
		transform: translateY(200px) rotate(720deg);
	}
}

/* side position and delay */
.container span:nth-child(1) {
	left: 5%;
	animation-delay: 2.6s;
}

.container span:nth-child(2) {
	left: 15%;
	animation-delay: 2.2s;
}

.container span:nth-child(3) {
	left: 25%;
	animation-delay: 4s;
}

.container span:nth-child(4) {
	left: 35%;
	animation-delay: 5.1s;
}

.container span:nth-child(5) {
	left: 45%;
	animation-delay: 4.4s;
}

.container span:nth-child(6) {
	left: 55%;
	animation-delay: 1s;
}

.container span:nth-child(7) {
	left: 65%;
	animation-delay: 0s;
}

.container span:nth-child(8) {
	left: 75%;
	animation-delay: 3.1s;
}

.container span:nth-child(9) {
	left: 85%;
	animation-delay: 1.3s;
}

.container span:nth-child(10) {
	left: 95%;
	animation-delay: 3.3s;
}