애니메이션 04

애니메이션 04

흔들거리는 애니메이션을 만들어보자...

See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen.

---

HTML

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

---

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}
}