CSS를 사용하여 양방향으로 애니메이션 속성 확장하기
CSS에서 animation-fill-mode 속성에 both 값을 설정하면 애니메이션이 시작되기 전과 종료된 후에도 키프레임 스타일이 유지되어, 애니메이션 속성이 양방향으로 확장됩니다.
animation-fill-mode의 주요 값
- none – 기본값으로, 애니메이션이 실행되는 동안에만 스타일이 적용됩니다.
- forwards – 애니메이션이 끝난 후에도 마지막 키프레임의 스타일이 그대로 유지됩니다.
- backwards – 애니메이션이 시작되기 전에 첫 번째 키프레임의 스타일이 미리 적용됩니다.
- both – forwards와 backwards가 모두 적용되어 애니메이션 스타일이 양방향으로 확장됩니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 200px;
position: relative;
background: red;
animation-name: myanim;
animation-duration: 2s;
animation-fill-mode: both;
}
@keyframes myanim {
from {left: 0px; background-color: green;}
to {left: 200px; background-color: blue;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
위 예제에서는 animation-fill-mode: both;를 사용했습니다. div 요소는 2초 동안 왼쪽에서 오른쪽으로 200px 이동하며, 배경색은 초록색에서 파란색으로 변합니다. both 값 덕분에 애니메이션이 종료된 후에도 요소가 최종 위치(왼쪽 200px)와 파란색 배경 상태를 그대로 유지하게 됩니다.