CSS 애니메이션 - 웨이브

애니메이션 만들기

애니메이션 : 웨이브

웨이브하는 공을 만들어봅시다.

@mixin center {
	display: flex;
	align-items: center;
	justify-content: center;
}

body {
	@include center;
	height: 100vh;
	background-image: linear-gradient(45deg, #00dbde 0%, #fc00ff 100%);
}
.row {
	display: flex;
	
	.circle {
		width: 10px; height: 10px;
		background: #fff;
		border-radius: 50%;
		margin: 5px 10px;
		transform-origin: top center;
		animation: spin 1s linear infinite;
	}
}

@keyframes spin {
	0%   {transform: scale(1.1) rotate(0deg)}
	50%  {transform: scale(0.2) rotate(180deg)}
	100% {transform: scale(1.1) rotate(360deg)}
}

// .row:nth-child(1) .circle  {animation-delay: 100ms}
// .row:nth-child(2) .circle  {animation-delay: 200ms}
// .row:nth-child(3) .circle  {animation-delay: 300ms}
// .row:nth-child(4) .circle  {animation-delay: 400ms}
// .row:nth-child(5) .circle  {animation-delay: 500ms}
// .row:nth-child(6) .circle  {animation-delay: 600ms}
// .row:nth-child(7) .circle  {animation-delay: 700ms}
// .row:nth-child(8) .circle  {animation-delay: 800ms}
// .row:nth-child(9) .circle  {animation-delay: 900ms}
// .row:nth-child(10) .circle {animation-delay: 1000ms}
// .row:nth-child(11) .circle {animation-delay: 1100ms}
// .row:nth-child(12) .circle {animation-delay: 1200ms}

@for $i from 1 through 12 {
	.row:nth-child(#{$i}) .circle {animation-delay: 100ms * $i}
}