CSS에서 모든 애니메이션 관련 속성을 한 번에 지정할 수 있는 약식(shorthand) 속성은 바로 animation입니다. 이 속성 하나만 사용하면 애니메이션 이름, 지속 시간(duration), 타이밍 함수(timing-function), 지연 시간(delay), 반복 횟수(iteration-count), 진행 방향(direction), 채우기 모드(fill-mode), 재생 상태(play-state) 등을 개별적으로 작성하지 않고도 간결하게 설정할 수 있습니다.
animation 약식 속성의 기본 문법
약식 속성의 값은 아래와 같은 순서로 나열하며, 각 값은 공백으로 구분합니다.
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
이 중 가장 많이 사용되는 두 가지는 애니메이션 이름과 지속 시간입니다. 예를 들어 animation: myanim 2s;라고 작성하면 'myanim'이라는 이름의 keyframes가 2초 동안 실행됩니다.
예제 코드
아래 예제는 animation 약식 속성을 활용해 div 요소의 배경색이 초록색에서 파란색으로 2초에 걸쳐 부드럽게 전환되도록 구현한 코드입니다. 직접 실행해 보면서 동작을 확인해 보세요.
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 200px;
background-color: yellow;
animation: myanim 2s;
}
@keyframes myanim {
from {
background-color: green;
}
to {
background-color: blue;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>활용 팁
약식 속성에서 시간 값을 두 개 작성할 경우, 첫 번째 값은 duration(지속 시간), 두 번째 값은 delay(지연 시간)로 해석됩니다. 또한 약식 속성에 명시하지 않은 개별 속성은 기본값으로 초기화되므로, 이미 설정해 둔 세부 속성이 있다면 주의해서 사용하는 것이 좋습니다.