CSS에서 animation-duration 속성은 애니메이션이 한 사이클을 완료하는 데 걸리는 시간을 지정하는 데 사용됩니다. 이 속성을 활용하면 요소가 움직이거나 색상이 변하는 등의 애니메이션 효과가 얼마나 빠르게 또는 느리게 진행될지 세밀하게 조절할 수 있습니다.
animation-duration 속성의 기본 개념
애니메이션의 지속 시간은 초(s) 또는 밀리초(ms) 단위로 설정할 수 있습니다. 예를 들어 animation-duration: 2s;는 애니메이션이 2초 동안 진행된다는 의미입니다. 기본값은 0s이며, 값을 지정하지 않으면 애니메이션은 실행되지 않습니다.
예제 코드
아래 코드를 실행하면 animation-duration 속성이 실제로 어떻게 작동하는지 확인할 수 있습니다. 빨간색 div 요소가 2초에 걸쳐 오른쪽으로 200px 이동하면서 배경색이 녹색에서 파란색으로 자연스럽게 전환됩니다.
<!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: 적용할 @keyframes 규칙의 이름을 지정합니다. 여기서는 'myanim'이라는 이름의 키프레임을 사용합니다.
- animation-duration: 2s; 애니메이션이 시작부터 끝까지 2초 동안 진행되도록 설정합니다.
- @keyframes: from(시작) 상태에서 to(끝) 상태까지의 변화를 정의합니다. 위치가 0px에서 200px로 이동하고, 배경색도 함께 변경됩니다.
활용 팁
지속 시간을 짧게 설정하면 역동적이고 빠른 느낌을 줄 수 있고, 길게 설정하면 부드럽고 완만한 효과를 연출할 수 있습니다. 또한 animation-timing-function, animation-delay, animation-iteration-count 등의 다른 애니메이션 관련 속성들과 함께 사용하면 더욱 풍부한 사용자 경험을 만들 수 있습니다.