[CSS] 키프레임과 애니메이션을 활용하여 로딩 만들기

키프레임을 만들고 animation-delay 속성을 이용해 시간차를 준다.
animation-delay 는 양수/음수 모두 사용할 수 있다.

See the Pen GZYZLv by 소지훈 (@sogoonii) on CodePen.

See the Pen mPzPNM by 소지훈 (@sogoonii) on CodePen.

transform: rotate를 이용해 회전을 시키는 방법이다.
회전을 시키는 것보다 도형을 그리는게 키포인트!

See the Pen LNgZPZ by 소지훈 (@sogoonii) on CodePen.

그라데이션 호(arc)를 이용한 로딩을 만든다.

See the Pen yORJBw by 소지훈 (@sogoonii) on CodePen.

그라데이션 호(arc)를 그리는 과정이다.

See the Pen dMgprL by 소지훈 (@sogoonii) on CodePen.

See the Pen wGYzZW by 소지훈 (@sogoonii) on CodePen.

See the Pen ZWqpZr by 소지훈 (@sogoonii) on CodePen.

See the Pen xVyEeQ by 소지훈 (@sogoonii) on CodePen.

하나의 원을 가리는 두개의 네모박스가 서로 다르게 움직여 새로운 효과를 만들어 낸다.

See the Pen yORaVV by 소지훈 (@sogoonii) on CodePen.

See the Pen RaeGyz by 소지훈 (@sogoonii) on CodePen.

transform: rotate를 이용해 각도를 돌리고,  translateX로 같은 수치만큼 이동시키면 아래와 같이 점을 배치할 수 있다. 여기선 rotate와  translateX의 순서가 중요하다. (rotate,  translateX 순으로 적용)

See the Pen dMgpNq by 소지훈 (@sogoonii) on CodePen.

cubic-bezier를 이용하면 좀 더 재미있는 효과를 만들 수 있다.

See the Pen reoaBV by 소지훈 (@sogoonii) on CodePen.