CSSのみでサクラが舞うアニメーションサンプル

2021-12-19CSS アニメーションサンプル集,CSS

CSSのみで作成した桜（サクラ）が舞い落ちるCSSアニメーションのサンプルコードになります。

「紙吹雪が舞う」や「雨が降る」のCSSアニメーションシリーズのひとつです。

CSSのみで紙吹雪が舞うアニメーションサンプル

ピュアなCSSのみで色とりどりの紙吹雪が舞うアニメーションサンプルです。別記事で紹介している雨が降 ...

https://1-notes.com/css-confetti-animation/

CSSのみで雨が降るアニメーションサンプル

ピュアなCSSのみで雨を降らせてみたアニメーションサンプルです。雨が降るパターンの各アニメーション ...

https://1-notes.com/css-rain-animation/

1. サクラが舞うCSSアニメーション

サクラが舞うCSSアニメーション

サクラが舞うCSSアニメーションの動作サンプルとサンプルコードです。

サンプルでは背景画像はいつもサンプルに使っているものを適当に使っていますが、サクラの雰囲気が出る背景をチョイスすれば良い感じになるかもしれません。

See the Pen CSS | Confetti Animation by yochans (@yochans) on CodePen.

HTMLにはサクラの他、背景画像やテキストを格納するコンテナ要素をdivタグで作成しています。

サクラはdivタグの中にspanタグひとつを一枚の花びらとして設置、サンプルでは桜の花びらの数は50個としています。

<div class="container">
  <img src="https://1-notes.com/images/ishidatami.jpg" border="0" />
	<div class="sakura"><span></span><span></span><span></span><span></span>
		<span></span><span></span><span></span><span></span><span></span>
		<span></span><span></span><span></span><span></span><span></span>
		<span></span><span></span><span></span><span></span><span></span>
		<span></span><span></span><span></span><span></span><span></span>
		<span></span><span></span><span></span><span></span><span></span>
		<span></span><span></span><span></span><span></span><span></span>
		<span></span><span></span><span></span><span></span><span></span>
		<span></span><span></span><span></span><span></span><span></span>
		<span></span><span></span><span></span><span></span><span></span>
	</div>
	<p>サクラが舞う。</p>
</div>

CSSアニメーションのキーフレームはサクラの花びらが右側に向かって落ちる用と、左側に向かって落ちる用の2種類作成しています。

花びらのサイズは3種類設定してあります。

.container {
	position: relative;
	width: 100%;
	overflow: hidden;
	/* for text	 */
	display: flex;
	justify-content: center;
	align-items: center;
}

.container img {
	width: 100%;
	filter: brightness(0.2);
}

.sakura {
	position: absolute;
	width: 100%;
	height: 100%;
}

.sakura span {
	position: absolute;
	top: -10%;
	left: 0;
	width: 0.8vw;
	height: 0.4vw;
	border-radius: 5% 80% 10% 80%;
	background-color: #ffb6c1;
}

/* add animation */
.sakura span:nth-child(2n+1) {
	animation: sakura-anim-1 10s 0s linear infinite;
}

.sakura span:nth-child(2n+2) {
	animation: sakura-anim-2 10s 0s linear infinite;
}

/* side position */
.sakura span:nth-child(1) {
	left: 0%;
}

.sakura span:nth-child(2) {
	left: 2%;
}

.sakura span:nth-child(3) {
	left: 4%;
}

.sakura span:nth-child(4) {
	left: 6%;
}

.sakura span:nth-child(5) {
	left: 8%;
}

.sakura span:nth-child(6) {
	left: 10%;
}

.sakura span:nth-child(7) {
	left: 12%;
}

.sakura span:nth-child(8) {
	left: 14%;
}

.sakura span:nth-child(9) {
	left: 16%;
}

.sakura span:nth-child(10) {
	left: 18%;
}

.sakura span:nth-child(11) {
	left: 20%;
}

.sakura span:nth-child(12) {
	left: 22%;
}

.sakura span:nth-child(13) {
	left: 24%;
}

.sakura span:nth-child(14) {
	left: 26%;
}

.sakura span:nth-child(15) {
	left: 28%;
}

.sakura span:nth-child(16) {
	left: 30%;
}

.sakura span:nth-child(17) {
	left: 32%;
}

.sakura span:nth-child(18) {
	left: 34%;
}

.sakura span:nth-child(19) {
	left: 36%;
}

.sakura span:nth-child(20) {
	left: 38%;
}

.sakura span:nth-child(21) {
	left: 40%;
}

.sakura span:nth-child(22) {
	left: 42%;
}

.sakura span:nth-child(23) {
	left: 44%;
}

.sakura span:nth-child(24) {
	left: 46%;
}

.sakura span:nth-child(25) {
	left: 48%;
}

.sakura span:nth-child(26) {
	left: 50%;
}

.sakura span:nth-child(27) {
	left: 52%;
}

.sakura span:nth-child(28) {
	left: 54%;
}

.sakura span:nth-child(29) {
	left: 56%;
}

.sakura span:nth-child(30) {
	left: 58%;
}

.sakura span:nth-child(31) {
	left: 60%;
}

.sakura span:nth-child(32) {
	left: 62%;
}

.sakura span:nth-child(33) {
	left: 64%;
}

.sakura span:nth-child(34) {
	left: 66%;
}

.sakura span:nth-child(35) {
	left: 68%;
}

.sakura span:nth-child(36) {
	left: 70%;
}

.sakura span:nth-child(37) {
	left: 72%;
}

.sakura span:nth-child(38) {
	left: 74%;
}

.sakura span:nth-child(39) {
	left: 76%;
}

.sakura span:nth-child(40) {
	left: 78%;
}

.sakura span:nth-child(41) {
	left: 80%;
}

.sakura span:nth-child(42) {
	left: 82%;
}

.sakura span:nth-child(43) {
	left: 84%;
}

.sakura span:nth-child(44) {
	left: 86%;
}

.sakura span:nth-child(45) {
	left: 88%;
}

.sakura span:nth-child(46) {
	left: 90%;
}

.sakura span:nth-child(47) {
	left: 92%;
}

.sakura span:nth-child(48) {
	left: 94%;
}

.sakura span:nth-child(49) {
	left: 96%;
}

.sakura span:nth-child(50) {
	left: 98%;
}

/* size */
.sakura span:nth-child(3n+1) {
	width: 1vw;
	height: 0.5vw;
}

.sakura span:nth-child(3n+2) {
	width: 0.8vw;
	height: 0.4vw;
}

.sakura span:nth-child(3n+3) {
	width: 0.6vw;
	height: 0.3vw;
}

/* animation-duration */
.sakura span:nth-child(4n+1) {
	animation-duration: 5s;
}

.sakura span:nth-child(4n+2) {
	animation-duration: 12s;
}

.sakura span:nth-child(4n+3) {
	animation-duration: 8s;
}

.sakura span:nth-child(4n+4) {
	animation-duration: 6s;
}


/* animation-delay */
.sakura span:nth-child(11n+1) {
	animation-delay: 0s;
}

.sakura span:nth-child(11n+2) {
	animation-delay: 9s;
}

.sakura span:nth-child(11n+3) {
	animation-delay: 2s;
}

.sakura span:nth-child(11n+4) {
	animation-delay: 5s;
}

.sakura span:nth-child(11n+5) {
	animation-delay: 6s;
}

.sakura span:nth-child(11n+6) {
	animation-delay: 7s;
}

.sakura span:nth-child(11n+7) {
	animation-delay: 3s;
}

.sakura span:nth-child(11n+8) {
	animation-delay: 1s;
}

.sakura span:nth-child(11n+9) {
	animation-delay: 2s;
}

.sakura span:nth-child(11n+10) {
	animation-delay: 11s;
}

.sakura span:nth-child(11n+11) {
	animation-delay: 10s;
}

/* animation */
@keyframes sakura-anim-1 {
	0% {
		top: -10%;
		transform: translateX(0) rotateX(0) rotateY(0);
	}

	100% {
		top: 100%;
		transform: translateX(15vw) rotateX(180deg) rotateY(360deg);
	}
}

@keyframes sakura-anim-2 {
	0% {
		top: -10%;
		transform: translateX(0);
	}

	100% {
		top: 100%;
		transform: translateX(-15vw) rotateX(180deg) rotateY(360deg);
	}
}

/* text */
.container p {
	position: absolute;
	font-size: 36px;
	font-weight: bold;
	color: #FFF;
}

CSS アニメーションサンプル集,CSS

Posted by Yousuke.U

ディスカッション

コメント一覧

まだ、コメントがありません