CSS로 애니메이션 지연시키기
CSS에서 애니메이션의 시작을 늦추고 싶다면 animation-delay 속성을 사용하면 됩니다. 이 속성에 원하는 시간(초 단위)을 지정하면, 페이지가 로드된 후 해당 시간만큼 기다렸다가 애니메이션이 실행됩니다.
animation-delay 속성의 기본 개념
animation-delay 값은 초(s) 또는 밀리초(ms) 단위로 설정할 수 있습니다. 예를 들어 animation-delay: 2s;라고 작성하면 애니메이션이 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초가 지난 뒤 애니메이션이 시작되도록 지연 시간을 설정합니다.
- @keyframes myanim — 애니메이션의 시작(from)과 끝(to) 상태를 정의합니다. 여기서는 배경색이 초록색에서 파란색으로 변합니다.
위 코드를 브라우저에서 실행하면 노란색 사각형이 먼저 나타나고, 2초 후에 색상 변화 애니메이션이 부드럽게 진행되는 것을 확인할 수 있습니다.