CSS로 효과적인 애니메이션 만들기: transition과 keyframes

CSS로 효과적인 애니메이션 만들기: transition과 keyframes

CSS를 활용하면 간단한 애니메이션 효과를 웹 페이지에 적용할 수 있습니다. 본 글에서는 CSS에서 제공하는 transition과 keyframes를 이용하여 애니메이션을 구현하는 방법을 소개합니다.

1. CSS transition

CSS transition은 HTML 요소의 스타일 변경에 애니메이션 효과를 부드럽게 적용할 수 있게 합니다. 주로 마우스 호버, 클릭 이벤트 등과 같이 상태가 변화하는 요소에 사용됩니다.

1.1 transition 속성 구성

transition 속성은 다음과 같이 구성됩니다.
​

• transition-property: 애니메이션 효과를 적용할 CSS 속성을 지정합니다.
• transition-duration: 애니메이션 효과의 지속 시간을 설정합니다.
• transition-timing-function: 애니메이션의 속도 곡선을 정의합니다.
• transition-delay: 애니메이션 시작 전 대기 시간을 설정합니다.

1.2 transition 예제

다음 예제는 마우스를 호버할 때 요소의 너비와 색상이 부드럽게 변화하는 애니메이션을 구현합니다.

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition-property: width, background-color;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}

.box:hover {
  width: 200px;
  background-color: red;
}

2. CSS keyframes

CSS keyframes는 더 복잡한 애니메이션 효과를 만들기 위해 사용됩니다. keyframes를 사용하면 애니메이션의 시작부터 끝까지 여러 단계를 설정할 수 있습니다.

2.1 @keyframes 규칙

@keyframes 규칙을 사용하여 애니메이션의 각 단계를 설정합니다. 각 단계는 퍼센트(%)로 표시되며, 0%는 시작점, 100%는 종료점을 나타냅니다.

2.2 keyframes 예제

다음 예제는 요소의 배경색이 파란색에서 빨간색으로 변경되는 동안 크기가 키워졌다 줄어드는 애니메이션을 구현합니다.

.box {
    width: 100 px;
    height: 100 px;
    background - color: blue;
    animation - name: growShrink;
    animation - duration: 2 s;
    animation - timing - function: ease - in -out;
    animation - iteration - count: infinite;
}

@keyframes growShrink {
    0 % {
        width: 100 px;
        background - color: blue;
    }
    50 % {
        width: 200 px;
        background - color: red;
    }
    100 % {
        width: 100 px;
        background - color: blue;
    }
}

3. transition과 keyframes 차이점

• transition은 시작 상태와 끝 상태만 정의할 수 있으며, 중간에 변화하는 과정은 CSS 엔진이 자동으로 계산합니다. keyframes는 애니메이션의 여러 단계를 직접 정의할 수 있습니다.
• transition은 주로 상태 변화에 따른 애니메이션에 사용되며, keyframes는 상태와 무관한 복잡한 애니메이션에 사용됩니다.

4. 애니메이션 성능 최적화 팁

애니메이션을 구현할 때, 렌더링 성능에 주의해야 합니다. 애니메이션이 웹 페이지의 성능을 저하시킬 수 있기 때문입니다. 다음은 애니메이션 성능을 최적화하는 몇 가지 팁입니다.
​

1. 가능한 경우 transform과 opacity 속성을 사용하세요. 이 속성들은 GPU를 활용해 렌더링되기 때문에 성능이 향상됩니다.
2. 불필요한 애니메이션은 줄이고, 합리적인 animation-duration을 설정하세요. 사용자 경험을 저해하지 않는 선에서 애니메이션 지속 시간을 최소화하면 성능이 향상됩니다.
3. will-change 속성을 사용하여 브라우저가 애니메이션을 최적화할 수 있도록 도와줍니다. 하지만 남용하지 않도록 주의하세요. 과도한 사용은 오히려 성능을 저하시킬 수 있습니다.

​
이러한 팁을 활용하여 애니메이션을 구현하면, 웹 페이지의 사용자 경험과 성능을 모두 증진시킬 수 있습니다. 애니메이션을 효과적으로 구현하고 최적화하는 방법을 연습하면서 개발자로서의 능력을 향상시켜 보세요.