변수를 활용해 CSS 애니메이션 만들기

CSS 변수를 잘 활용하면 반복해서 정의해야 하는 애니메이션 작업을 작은 CSS 코드로 줄일 수 있습니다.

키프레임 애니메이션 안에서도 CSS 변수를 사용할 수 있기 때문에 여러 개의 유사한 키프레임 애니메이션을 만들지 않고 한개의 애니메이션 정의를 재활용할 수 있습니다.

하트 모양이 여러개 겹쳐서 입체 느낌이 나면서 퍼져나가는 다음과 같은 애니메이션을 만들어 보겠습니다.

앞의 애니메이션은 투명해지면서 커지는 하트 애니메이션 5개를 겹쳐서 만든 것입니다.

먼저 기본이 되는 하트 애니메이션 1개를 만듭니다.

.box{
    left:100px;
    top: 100px;    
}
.box::before{
    content: '❤';
    position: absolute;
    display: inline-block;
    left: 100px;
    top: 100px;
    color: pink;
    font-size: 75px;
    line-height: 1;
    animation: heartbeat 2s infinite ease; /* 2초 애니메이션을 무한 반복 */
}
@keyframes heartbeat {
    to {
        transform: scale(1.3);
        opacity: 0;
    }
}

하트가 커지는 정도를 설정하는 "--size" CSS 변수를 하나 만들어서 ".box" 클래스에 적용한 후, 키프레임 애니메이션의 "scale()" 함수에 이 변수를 적용합니다.

.box{
    left:100px;
    top: 100px;
    --size: 2.5;
}
.box::before{
    content: '❤';
    position: absolute;
    display: inline-block;
    left: 100px;
    top: 100px;
    color: pink;
    font-size: 75px;
    line-height: 1;
    animation: heartbeat 2s infinite ease; /* 2초 애니메이션을 무한 반복 */
}
@keyframes heartbeat {
    to {
        transform: scale(var(--size));
        opacity: 0;
    }
}

"--size" 변수 값을 변경하는데 따라서 하트가 퍼져나가는 크기가 변경되는 것을 확인할 수 있습니다.

이제 하트 HTML 요소를 5개 복사한 후 다음처럼 CSS를 적용해 요소별로 변수 값을 다르게 대입합니다. 크기가 다른 상황에 대응할 수 있도록 키프레임 애니메이션의 변수를 대입하는 위치에 "calc()" 함수를 사용해서 "calc(var(--size)*2)" 와 같이 배율도 적용합니다.

이렇게 하면 전체 애니메이션이 적용되는 크기를 줄이거나 넓혀야 할 때 배율 값만 변경해서 대응을 할 수 있습니다.

.box{
    left:100px;
    top: 100px;    
}
.box:nth-child(1){
    --size: 1.6;
}
.box:nth-child(2){
    --size: 1.5;
}
.box:nth-child(3){
    --size: 2;
}
.box:nth-child(4){
    --size: 2.8;
}
.box:nth-child(5){
    --size: 1.3;
}
.box::before{
    content: '❤';
    position: absolute;
    display: inline-block;
    left: 100px;
    top: 100px;
    color: pink;
    font-size: 75px;
    line-height: 1;
    animation: heartbeat 2s infinite ease;
}

@keyframes heartbeat {
    to {
        transform: scale(calc(var(--size)*2));
        opacity: 0;
    }
}

완성한 하트 중첩 애니메이션의 개별 요소들의 위치를 각각 다르게 배치해서 다음처럼 반짝거리는 애니메이션 효과를 만들 수도 있습니다.