CSS 애니메이션 : 꾸물거리는 점

애니메이션 만들기

css 애니메이션을 만들어 봅니다!

애니메이션 : 꾸물거리는 점

꾸물꾸물 거리는 것처럼 보이는 점을 만듭니다.

pug 코드 보기

div.circle_wrap
	-for (var x =1; x<=12; x++)
		div.row
			-for (var y = 1; y<=12; y++)
				div.circle

Scss 코드 보기

@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;
		border-radius: 50%;
		background: #fff;
		transform-origin: top center;
		animation: spin 1s linear infinite;
		margin: 4px 10px;
	}
	
}
@keyframes spin {
		0% {transform:scale(1.1) rotate(0deg)}
		50% {transform:scale(0.2) rotate(180deg)}
		100% {transform:scale(1.1) rotate(360deg)}
}
@for $i from 1 through 12 {
		.row:nth-child(#{$i}) .circle {animation-delay: 100ms * $i}
	}

See the Pen Untitled by hjkang306 (@hjkang306) on CodePen.