[CSS] 쿨타임 애니메이션(clip-path: polygon)

게임등에서 흔히 쿨타임 표시 기능으로 쓰이는 위와 같은 애니메이션을 만들어 보겠다.

clip-path: polygon()을 사용할 것이다.

clip-path: polygon()은 영역을 x,y축을 이용해 점을 찍어 도형으로 잘라내는 역할을 한다.

영역에 위와 같이 9가지의 점을 찍어 도형으로 잘라낼것이다.

clip-path: polygon(50% 50%, 50% 0, 100% 0)을 사용하면 위와 같이 삼각형 형태로 자를 수 있다.

clip-path: polygon(50% 50%, 50% 0, 100% 0 100% 50%)을 사용하면 위와 같이 사각형으로 잘린것을 확인할 수 있다.

이를 애니메이션으로 이어주면

자연스럽게 변화하지 않는다.

clip-path: polygon()으로 만든 도형이 점이 3개에서 4개로 변화하였기에 애니메이션 효과가 의도대로 이루어지지 않는것이다.

이를 해결하기 위해 삼각형으로 자를 때에도 점을 4개를 찍어야한다. 3번점에 점을 2개 찍어 세번째 점이 네번째 점으로 이동되는 애니메이션을 넣을 수 있다.

위 사항을 응용하여 아래와 같이 5번, 2번, 3번, 6번, 9번, 8번, 7번, 4번, 1번, 2번의 점을 이어주면 애니메이션이 완성된다.

@keyframes change {
    0% {
        clip-path: polygon(50% 50%, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0);
    } 5% {
        clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 0,100% 0, 100% 0, 100% 0, 100% 0, 100% 0, 100% 0);
    } 10% {
        clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 50%, 100% 50%,100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%);
    } 15% {
        clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 50%,100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);
    } 20%{
        clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 50%,100% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%);
    } 25%{
        clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 50%,100% 100%, 50% 100%, 0 100%, 0 100%, 0 100%, 0 100%);
    } 30%{
        clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 50%,100% 100%, 50% 100%, 0 100%, 0 50%, 0 50%, 0 50%);
    } 35%{
        clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%, 0 0, 0 0);
    } 40%{
        clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%, 0 0, 50% 0);
    } 60%{
        clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%, 0 0, 50% 0);
    } 65%{
        clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%, 0 0, 50% 0);
    } 70%{
        clip-path: polygon(50% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%, 0 0, 50% 0);
    } 75%{
        clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0 100%, 0 50%, 0 0, 50% 0);
    } 80%{
        clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0 100%, 0 50%, 0 0, 50% 0);
    } 85%{
        clip-path: polygon(50% 50%, 0% 100%, 0 100%, 0 100%, 0 100%, 0 100%, 0 100%, 0 50%, 0 0, 50% 0);
    } 90%{
        clip-path: polygon(50% 50%, 0% 50%, 0 50%, 0 50%, 0 50%, 0 50%, 0 50%, 0 50%, 0 0, 50% 0);
    } 95%{
        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 50% 0);
    } 100%{
        clip-path: polygon(50% 50%, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0);
    }
}