CSS에서 animation-delay 속성을 사용하면 애니메이션이 시작되기 전에 원하는 만큼의 지연 시간을 설정할 수 있습니다. 이 속성은 초(s) 또는 밀리초(ms) 단위로 값을 지정하며, 페이지가 로드된 후 애니메이션이 바로 실행되지 않고 설정한 시간만큼 기다린 뒤 재생됩니다.
animation-delay 속성의 기본 문법
기본 문법은 다음과 같습니다.
animation-delay: 시간값;
예를 들어 animation-delay: 2s;라고 작성하면 애니메이션이 2초 후에 시작됩니다. 값을 생략하면 기본값인 0s가 적용되어 즉시 실행됩니다.
animation-delay 예제 코드
아래 예제는 노란색 사각형 요소가 2초의 지연 시간을 가진 뒤, 초록색에서 파란색으로 배경색이 서서히 변하는 애니메이션을 보여줍니다. 직접 실행해 보면서 동작을 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 200px;
background-color: yellow;
animation-name: myanim;
animation-duration: 2s;
animation-delay: 2s;
}
@keyframes myanim {
from {
background-color: green;
}
to {
background-color: blue;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>코드 설명
- animation-name: myanim; – 적용할 키프레임 애니메이션의 이름을 지정합니다.
- animation-duration: 2s; – 애니메이션 한 사이클이 완료되는 데 걸리는 시간을 2초로 설정합니다.
- animation-delay: 2s; – 페이지 로드 후 애니메이션이 시작되기까지 2초를 기다립니다.
- @keyframes myanim – 초록색(green)에서 파란색(blue)으로 배경색이 변화하는 과정을 정의합니다.
참고: 음수 값 활용하기
animation-delay에는 음수 값도 사용할 수 있습니다. 예를 들어 animation-delay: -1s;로 설정하면 애니메이션이 이미 1초 진행된 상태에서 시작되므로, 애니메이션의 일부를 건너뛰고 재생하는 효과를 얻을 수 있습니다.
이처럼 animation-delay 속성을 활용하면 여러 요소의 애니메이션 시작 시점을 조절하여 더욱 역동적이고 세련된 웹 인터페이스를 만들 수 있습니다.