CSS에서 animation-name 속성은 @keyframes로 정의한 애니메이션에 이름을 지정하고 해당 애니메이션을 요소에 연결하는 역할을 합니다. 이 속성이 없으면 @keyframes 규칙을 아무리 작성해도 실제 요소에는 아무런 효과가 나타나지 않습니다.
아래 예제 코드를 실행하면 애니메이션 이름을 설정하는 방법을 직접 확인할 수 있습니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 200px;
position: relative;
background: red;
animation-name: myanim;
animation-duration: 2s;
}
@keyframes myanim {
from {left: 0px; background-color: green;}
to {left: 100px; background-color: blue;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>코드 설명
위 예제의 동작 원리를 단계별로 살펴보겠습니다.
- @keyframes myanim 정의: 'myanim'이라는 이름의 애니메이션을 선언합니다. 시작 지점(from)에서는 요소가 왼쪽 0px 위치에 초록색 배경으로 표시되고, 종료 지점(to)에서는 왼쪽 100px 위치로 이동하며 배경이 파란색으로 변경됩니다.
- animation-name 적용: div 요소에
animation-name: myanim;을 지정하여 위에서 정의한 애니메이션을 연결합니다. - animation-duration 설정:
animation-duration: 2s;로 애니메이션이 시작부터 끝까지 진행되는 시간을 2초로 지정합니다.
결과적으로 페이지를 열면 빨간색 사각형이 2초에 걸쳐 오른쪽으로 100px 이동하면서 색상이 초록색과 파란색으로 변하는 것을 확인할 수 있습니다.
참고 사항
animation-name 속성은 여러 개의 애니메이션을 쉼표(,)로 구분하여 동시에 적용할 수도 있습니다. 또한 애니메이션 이름은 대소문자를 구분하므로 @keyframes에서 정의한 이름과 정확히 일치시켜야 합니다.