CSS에서 애니메이션이 한 주기(사이클)를 완료하는 데 걸리는 시간을 설정하려면 animation-duration 속성을 사용합니다.
animation-duration 속성이란?
animation-duration은 요소에 적용된 애니메이션이 시작부터 끝까지 한 번 완료되는 데 소요되는 시간을 지정하는 속성입니다. 초 단위의 s 또는 밀리초 단위의 ms 값을 사용할 수 있으며, 기본값은 0s입니다.
예제 코드
아래 예제에서는 빨간색 div 요소가 오른쪽으로 이동하면서 색상이 변하는 애니메이션을 2초 동안 실행합니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 200px;
position: relative;
background: red;
animation-name: myanim;
animation-duration: 2s;
}
@keyframes myanim {
from {left: 0px; background-color: green;}
to {left: 200px; background-color: blue;}
}
</style>
</head>
<body>
<div> </div>
</body>
</html>코드 설명
- animation-name: myanim; — 적용할 키프레임 애니메이션의 이름을 지정합니다.
- animation-duration: 2s; — 애니메이션이 한 사이클을 완료하는 데 2초가 걸리도록 설정합니다.
- @keyframes myanim — 애니메이션의 시작(from)과 끝(to) 상태를 정의합니다. 요소가 왼쪽 0px에서 200px로 이동하며 배경색이 녹색에서 파란색으로 변합니다.
참고 사항
시간 값은 2s(2초) 또는 500ms(0.5초)처럼 다양하게 지정할 수 있습니다. 또한 animation-duration이 0s이거나 음수 값인 경우 애니메이션이 실행되지 않으므로 주의해야 합니다. 여러 개의 애니메이션을 사용할 때는 쉼표로 구분하여 각각 다른 지속 시간을 지정할 수도 있습니다.