CSS로 시작과 끝이 느린 애니메이션 설정하기
CSS에서 애니메이션의 가속도를 조절하려면 animation-timing-function 속성을 사용합니다. 이 속성에 ease-in-out 값을 지정하면 애니메이션이 천천히 시작하고, 중간에 빨라진 뒤, 마지막에 다시 천천히 감속되는 자연스러운 움직임을 구현할 수 있습니다.
ease-in-out 효과는 요소가 화면에서 이동하거나 등장·퇴장할 때 부드럽고 안정적인 느낌을 주기 때문에 실무에서 가장 널리 사용되는 타이밍 함수 중 하나입니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 200px;
position: relative;
background-color: #808000;
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-out;}
</style>
</head>
<body>
<div id = "demo">ease-in-out 효과</div>
</body>
</html>코드 설명
- animation-name: 적용할 @keyframes 이름(myanim)을 지정합니다.
- animation-duration: 애니메이션 한 사이클의 지속 시간을 2초로 설정합니다.
- animation-direction: alternate-reverse 값으로 역방향부터 시작해 왕복 재생합니다.
- animation-iteration-count: 애니메이션 반복 횟수를 3회로 지정합니다.
- @keyframes: left 위치가 100px에서 200px로 변하는 동작을 정의합니다.
- #demo: 해당 요소에만 ease-in-out 타이밍 함수를 적용합니다.
참고: 주요 타이밍 함수 값 비교
- ease: 기본값으로, 빠르게 시작해 중간부터 서서히 느려집니다.
- linear: 처음부터 끝까지 일정한 속도로 진행됩니다.
- ease-in: 천천히 시작해 점점 빨라집니다.
- ease-out: 빠르게 시작해 점점 느려지며 끝납니다.
- ease-in-out: 시작과 끝이 모두 느린 곡선으로, 가장 부드러운 움직임을 제공합니다.
이처럼 animation-timing-function 속성 하나만으로도 애니메이션의 분위기를 크게 바꿀 수 있습니다. 프로젝트의 성격과 원하는 사용자 경험에 맞는 값을 선택해 적용해 보세요.