CSS animation-name 속성이란?
animation-name 속성은 요소에 적용할 @keyframes 규칙의 이름을 지정하는 CSS 속성입니다. 이 속성을 사용하면 미리 정의해 둔 키프레임 애니메이션을 특정 요소에 연결하여 실행할 수 있습니다.
animation-name은 단독으로 동작하지 않으며, 일반적으로 animation-duration(재생 시간)과 함께 사용해야 애니메이션이 화면에 나타납니다. 재생 시간이 지정되지 않으면 기본값인 0초로 설정되어 애니메이션이 실행되지 않습니다.
기본 문법
animation-name: keyframes이름 | none;
- keyframes이름 – 적용할 @keyframes 규칙의 이름을 지정합니다.
- none – 기본값으로, 어떤 애니메이션도 적용하지 않습니다.
animation-name 속성 예제
아래 코드는 div 요소에 'myanim'이라는 이름의 키프레임 애니메이션을 적용하는 예제입니다. 배경색이 초록색에서 파란색으로 3초에 걸쳐 부드럽게 전환되며, 3초의 지연 시간 후에 시작됩니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 200px;
background-color: yellow;
animation-name: myanim;
animation-duration: 3s;
animation-delay: 3s;
}
@keyframes myanim {
from {
background-color: green;
}
to {
background-color: blue;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>코드 설명
animation-name: myanim;– 'myanim'이라는 이름의 키프레임 애니메이션을 div 요소에 적용합니다.animation-duration: 3s;– 애니메이션이 한 사이클을 완료하는 데 걸리는 시간을 3초로 설정합니다.animation-delay: 3s;– 페이지가 로드된 후 3초 뒤에 애니메이션이 시작되도록 지연 시간을 지정합니다.@keyframes myanim– 애니메이션의 시작(from)과 끝(to) 상태를 정의합니다. 여기서는 배경색이 초록색에서 파란색으로 변합니다.
함께 알아두면 좋은 관련 속성
애니메이션을 더 세밀하게 제어하려면 다음 속성들도 함께 활용하는 것이 좋습니다.
- animation-duration – 애니메이션 한 사이클의 재생 시간을 지정합니다.
- animation-timing-function – 애니메이션의 진행 곡선(ease, linear 등)을 설정합니다.
- animation-delay – 애니메이션 시작 전 대기 시간을 지정합니다.
- animation-iteration-count – 애니메이션 반복 횟수를 설정합니다(infinite로 무한 반복 가능).
- animation-direction – 애니메이션의 재생 방향(정방향, 역방향, 교차)을 지정합니다.
이러한 개별 속성들을 하나로 묶어 animation 축약 속성(shorthand)으로 한 번에 작성할 수도 있습니다.