CSS에서 애니메이션의 시작 속도를 느리게 설정하려면 animation-timing-function 속성에 ease-in 값을 사용하면 됩니다. ease-in은 애니메이션이 천천히 시작되어 점점 빨라지는 가속 곡선을 적용하며, 요소가 자연스럽게 움직이기 시작하는 듯한 효과를 연출할 때 유용합니다.
animation-timing-function 속성이란?
animation-timing-function 속성은 CSS 애니메이션의 각 사이클 동안 진행 속도의 변화 방식을 결정합니다. 기본값은 ease이며, 그 외에 linear, ease-out, ease-in-out, cubic-bezier() 등 다양한 값을 사용할 수 있습니다.
주요 타이밍 함수 값
ease: 천천히 시작해 빨라진 후 다시 느려지는 기본값입니다.
ease-in: 느리게 시작하여 점점 빨라집니다.
ease-out: 빠르게 시작하여 점점 느려집니다.
ease-in-out: 느리게 시작하고 느리게 끝납니다.
linear: 처음부터 끝까지 일정한 속도로 진행됩니다.
ease-in 애니메이션 예제
아래 예제에서는 노란색 div 요소에 2초 길이의 애니메이션을 적용하고, animation-timing-function에 ease-in 값을 지정하여 느린 시작 효과를 구현했습니다. 애니메이션은 alternate-reverse 방향으로 3번 반복되며, @keyframes 규칙을 통해 왼쪽 위치가 100px에서 200px로 이동합니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 200px;
position: relative;
background-color: yellow;
animation-name: myanim;
animation-duration: 2s;
animation-direction: alternate-reverse;
animation-iteration-count: 3;
}
@keyframes myanim {
from {left: 100px;}
to {left: 200px;}
}
#demo {animation-timing-function: ease-in;}
</style>
</head>
<body>
<div id = "demo">ease-in effect</div>
</body>
</html>코드 설명
animation-name: 적용할 @keyframes 이름(myanim)을 지정합니다.
animation-duration: 애니메이션 한 사이클의 지속 시간을 2초로 설정합니다.
animation-direction: alternate-reverse로 설정하여 역방향부터 번갈아 재생합니다.
animation-iteration-count: 애니메이션 반복 횟수를 3회로 지정합니다.
#demo 선택자: 해당 요소에만 ease-in 타이밍 함수를 적용해 느린 시작 효과를 부여합니다.
브라우저에서 위 코드를 실행하면 노란색 상자가 처음에는 천천히 움직이다가 점점 빨라지는 것을 확인할 수 있습니다. 더 세밀한 속도 조절이 필요하다면 cubic-bezier(0.42, 0, 1, 1)처럼 베지어 곡선 값을 직접 지정하는 방법도 활용해 보세요.