CSS에서 애니메이션 관련 개별 속성들을 한 번에 설정할 수 있는 단축 속성(shorthand)은 바로 animation입니다. 이 속성 하나만으로 애니메이션 지속 시간(duration), 애니메이션 이름(name), 타이밍 함수(timing-function), 지연 시간(delay), 반복 횟수(iteration-count), 방향(direction), 채우기 모드(fill-mode) 등을 간결하게 지정할 수 있습니다.
animation 단축 속성의 기본 문법
단축 속성을 사용하면 여러 줄에 걸쳐 작성해야 할 코드를 한 줄로 줄일 수 있어 코드가 훨씬 깔끔해집니다.
/* 기본 문법 */ animation: name duration timing-function delay iteration-count direction fill-mode;
속성 순서 주의사항
단축 속성에서 두 개의 시간 값이 있을 경우, 첫 번째 값은 duration(지속 시간), 두 번째 값은 delay(지연 시간)로 해석됩니다. 이 순서를 혼동하면 의도와 다르게 동작할 수 있으므로 주의해야 합니다.
예제: 배경색이 변하는 애니메이션
아래 예제는 animation 단축 속성을 활용해 노란색 사각형이 2초 동안 초록색에서 파란색으로 부드럽게 전환되는 코드입니다. 직접 실행해 보면서 동작 방식을 확인해 보세요.
코드 예시
<!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>핵심 포인트 정리
@keyframes로 애니메이션의 시작(from)과 끝(to) 상태를 먼저 정의합니다.animation단축 속성으로 요소에 애니메이션을 적용합니다.- 시간 값을 두 개 이상 쓸 때는 duration → delay 순서임을 기억하세요.
- 반복 재생이 필요하다면
infinite키워드를 추가하면 됩니다. 예:animation: myanim 2s infinite;
이처럼 animation 단축 속성을 활용하면 CSS 애니메이션을 더 짧고 가독성 좋은 코드로 구현할 수 있습니다.