[CSS100DAYS :: DAY4] 인터렉티브 CSS 다루기 - transfrom을 이용하여 동심원 애니메이션 만들기

DAY2도 했는데 얘가 더 쉬워서 먼저 올린다. CSS 100 챌린지를 하면서 느낀 건 transfrom을 잘만 사용하면 어려워보이는 인터렉티브 동작도 생각보다 쉽게 구현할 수 있고, 그 애니메이션이란 게 대부분 반복적이다 보니 처음에만 잘 방향을 잡아두면 어렵지 않게 만들 수 있다.

가장 먼저 html 코드를 작성해준다. 지난번과 크게 다르지 않다.

<div class="frame">
  <div class="center">
        <div class="circle one"></div>
        <div class="circle two"></div>
        <div class="circle three"></div>
  </div>
</div>

이제 CSS로 기본적인 모양을 만들어주자. 배경색과 쉐이드가 있는 각각 크기가 다른 원 세 개를 만들어 준다. 여기서 infinite는 애니메이션을 무한으로 반복시켜 주는 것이고 alternate는 애니메이션을 순방향으로 진행시킨 다음 역방향으로 다시 진행시켜 주는 것을 말한다. 이렇게 하면 동심원이 펼쳐졌다가 다시 사그라드는 동작을 영원히 반복하게 된다.

*모든 원 모양은 크기만 다르고 나머지는 동일한 스타일을 가지므로 circle에 따로 스타일을 빼줬다.*

.circle{
    position:absolute;
    background:#fff;
    border-radius:50%;
    box-shadow: 0px 5px 10px rgb(0, 0, 0, 30%);
    transform-origin: center;
}

* z-index 및 크기, 애니메이션 길이가 다르므로 다음과 같이 만들어 줬다. 지금 생각해보니 CSS DAY2도 alternate로 만들었으면 애니메이션 2개씩 우겨넣을 필요가 없었다... 바보바보*

.one{
    width:180px;
    height:180px;
    top:-90px;
    left:-90px;
    z-index:1;
    animation: one 2s infinite alternate;
}

.two{
    width:110px;
    height:110px;
    top:-55px;
    left:-55px;
    z-index:2;
    animation: two 2s infinite alternate;
}

.three{
    width:50px;
    height:50px;
    top:-25px;
    left:-25px;
    z-index:3;
    animation: three 2s infinite alternate;
}

이제 키프레임을 각각 줘보자. 세 개가 펼쳐지는 시간과 다시 사그라드는 시간이 다르므로 그것을 주의해서 만들어주면 끝이다. 솔직히 DAY2보다 이게 더 간단하지 않나? 싶었다. 이거 제작할 때 시간도 덜들었음 이렇게 키 프레임을 하나씩 줘보자. 나 처럼 애니메이션 하나의 시간을 같게 하고 각각의 %를 다르게 줘도 되지만 애니메이션 시간을 다르게 하고 키프레임을 하나로 주는 것도 방법이라고 할 수 있겠다. 다만 나는 애니메이션 시간이 다르게 하면 너무 계산이 복잡해지는 느낌이라 최대한 직관적인 선택을 했다.

@keyframes three{
    0%, 70%{
        transform: scale(0)
    }

    100%{
        transform: scale(1)
    }
}

@keyframes two{
    0%, 40%{
        transform: scale(0)
    }

    100%{
        transform: scale(1)
    }
}

@keyframes one{
    0%, 10%{
        transform: scale(0)
    }

    100%{
        transform: scale(1)
    }
}

 

CSS100DAY는 다음 링크를 통해 들어갈 수 있다.

 

100 Days CSS Challenge

 

내가 완성한 작업물들은 다음에서 볼 수 있다. 아직 몇 개 안했지만 올 해 이것들의 절반을 채우는 것이 내 목표다.

100 Days CSS Challenge