CSS를 사용하면 웹페이지에 다양한 애니메이션 효과를 추가할 수 있습니다. 다음은 CSS를 사용하여 애니메이션 효과를 주는 몇 가지 속성과 사용법에 대해 알아보겠습니다.

1. animation-name

animation-name 속성은 애니메이션을 정의하는 keyframes 이름을 지정합니다. 이 속성을 사용하여 애니메이션을 적용할 keyframes를 정의하고, 해당 keyframes의 이름을 animation-name에 지정하여 애니메이션을 적용할 수 있습니다.

@keyframes example {
  0%   { background-color: red; }
  50%  { background-color: yellow; }
  100% { background-color: blue; }
}

.element {
  animation-name: example;
}

2. animation-duration

animation-duration 속성은 애니메이션의 진행 시간을 지정합니다. 시간은 초 단위로 설정하며, 소수점을 사용하여 더 정확한 시간을 표현할 수 있습니다.

.element {
  animation-duration: 3s;
}

3. animation-timing-function

animation-timing-function 속성은 애니메이션의 타이밍을 지정합니다. 다양한 타이밍 함수 중에서 ease, linear, ease-in, ease-out, ease-in-out 등을 선택하여 애니메이션의 진행 방식을 조절할 수 있습니다.

.element {
  animation-timing-function: ease;
}

4. animation-iteration-count

animation-iteration-count 속성은 애니메이션의 반복 횟수를 지정합니다. infinite 키워드를 사용하여 무한 반복되도록 설정할 수도 있습니다.

.element {
  animation-iteration-count: 2;
}

5. animation-delay

animation-delay 속성은 애니메이션의 지연 시간을 지정합니다. 설정한 시간만큼의 대기 후에 애니메이션이 시작됩니다.

.element {
  animation-delay: 1s;
}

6. animation-fill-mode

animation-fill-mode 속성은 애니메이션이 시작하기 전이나 끝난 후에 요소의 스타일을 유지할지를 지정합니다. forwards, backwards, both, none 등의 값으로 설정할 수 있습니다.

.element {
  animation-fill-mode: both;
}

마무리

CSS의 다양한 애니메이션 속성을 활용하면 웹페이지에 동적이고 효과적인 시각적 효과를 줄 수 있습니다. 각 속성의 사용법을 익히고, 적절히 조합하여 다양한 애니메이션을 만들어 보세요.