CSS효과 - 원(Circle)으로 나타났다 사라졌다 효과 구현하기

※ 해당 포스트는 http://100dayscss.com/의 4번 글의 설명을 위해 작성자가 다시 재구성한 포스팅입니다.

※ 무단 스크랩은 허용하지 않습니다.

※ 

---

이번에는 CSS 효과만을 이용해 여러 개의 원이 겹치면서 나타났다 사라지는 효과를 연출해 보겠습니다.

먼저 구현하기에 앞서, 선행적으로 알고 있어야 할 것들이 몇 가지 있습니다.

- transform에 대해 모르시면 잠시 들렀다 오세요.

- position에 대해 모르시면 잠시 들렀다 오세요.

- transition에 대해 모르시면 잠시 들렀다 오세요.

바탕 배경을 먼저 작업을 해봅시다.

See the Pen wxxpbJ by Munkyu Yang (@moonformeli) on CodePen.

배경이 되는 .wrapper div를 설정했습니다. 그 안에 3개의 자식 div를 만들었는데요. 얘네들은 이제 각 다른 사이즈의 원이 될 예정입니다! 

그 다음에는 자식 div로 설정된 .circle1, .circle2, .circle3 에 대한 기초 작업을 진행해볼게요.

See the Pen MBBrNX by Munkyu Yang (@moonformeli) on CodePen.

자, 화면 중앙에 원이 3개가 만들어졌습니다! 그림자는 box-shadow: 7px 7px 10px 1px rgba(0,0,0,0.5); 

이 코드가 그림자를 생성하고 있습니다. 이제 여기서 원이 늘어났다 줄어들었다 하는 효과를 넣어보겠습니다.  이 효과는 CSS의 Animation 효과를 사용할 예정이니, 아직 Animation 이 익숙하지 않으시다면 사용법을 먼저 숙지하시고 보시면 더 좋을 것 같습니다. ^^

See the Pen MBBQKq by Munkyu Yang (@moonformeli) on CodePen.

코드를 보시면 @keyframes 를 이용해 애니메이션을 3개를 만들었습니다. 각 애니메이션의 상태는 0 ~ 100%를 기점으로 여러 개의 상태 중단점을 만드실 수 있어요. 예를 들어서@keyframes scale1 을 봅시다! 이 애니메이션은 중단점이 2개가 있네요. 0%는 애니메이션의 시작, 100%는 애니메이션의 끝을 의미합니다. 애니메이션이 시작할 때 transform: scale(0) 으로 시작하고 애니메이션이 끝날 때는 transform: scale(1) 이 될 수 있도록 CSS는 애니메이션에 연결된 DOM의 상태를 조절합니다.

그렇다면 중단점이 3개 이상인 경우는 어떻게 할까요? @keyframe scale2 를 예시로 보시면 됩니다. 0% 일 때와 40% 일 때의 상태값이 같네요? 그리고 그 사이엔 어떠한 중단점도 없습니다. 즉, 0% 일 때 transform: scale(0) 으로 출발했고 그 다음 중단점에 걸려있는 상태 변화값으로 서서히 변하기 시작하려고 하는데, 그 다음 중단점인 40%에 걸려있는 코드가 마침 0%에 걸린 코드와 같습니다. 결국 transform: scale(0) 같은 코드가 계속 실행이 되니 우리 눈에는 변화가 없는 것처럼 보이는 것이죠. 그러다가 40%를 넘어가는 시점부터는 100%에 걸린 코드 내용이 다르다보니 우리 눈에 인지가 되기 시작하는 것입니다.

즉, 애니메이션의 중단점으로 애니메이션 1 cycle의 속도를 조절할 수 있습니다.

그 다음에는 이제 애니메이션을 걸어보겠습니다.

See the Pen LBBQOG by Munkyu Yang (@moonformeli) on CodePen.

짠, 금방 만들어졌죠? .circle1에 걸린 애니메이션을 살펴보겠습니다. 

animation: scale1 2s infinite alternate;

이 코드의 의미는, @keyframes scale1 애니메이션을 2초간 수행하고, alternate는 애니메이션이 정방향으로 실행이 된 후, 그 다음 차례에는 역방향으로 다시 실행한다는 의미입니다. infinite의 의미는 애니메이션을 무한 반복 한다는 뜻입니다. 즉, "scale1 애니메이션을 2초동안 수행하되, 애니메이션을 무한히 반복해서 실행하고, 매번 번갈아가면서 정방향과 역방향으로 애니메이션을 수행한다"는 의미입니다.

이번에 다뤄본 애니메이션은 비교적 쉬운 애니메이션이었습니다. 다음에도 더 재밌는 효과로 풀이를 해볼게요.