CSS에서 애니메이션이 시작되기 전에 일정 시간 동안 대기하도록 설정하려면 animation-delay 속성을 사용하면 됩니다. 이 속성은 애니메이션이 적용된 요소가 화면에 나타난 후 지정한 시간만큼 기다렸다가 애니메이션을 실행합니다.
animation-delay 속성의 기본 사용법
아래 예제에서는 노란색 배경의 div 요소가 페이지 로드 후 2초를 기다린 뒤, 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초간 지연됩니다.
참고 사항
지연 시간에는 초(s) 또는 밀리초(ms) 단위를 사용할 수 있습니다. 예를 들어 animation-delay: 500ms;처럼 작성하면 0.5초 후에 애니메이션이 시작됩니다. 또한 음수 값을 지정하면 애니메이션이 이미 진행된 상태에서 시작되므로, 상황에 맞게 활용하면 유용합니다.