CSS에서 margin-left 속성에 애니메이션 효과를 적용하면 요소가 좌우로 부드럽게 움직이는 동적 연출을 만들 수 있습니다. 핵심은 @keyframes 규칙을 사용해 원하는 시점의 왼쪽 마진 값을 정의하고, 이를 animation 속성으로 요소에 연결하는 것입니다.
margin-left 애니메이션 예제
아래 코드는 회색 배경의 div 요소가 3초 주기로 반복적으로 오른쪽으로 이동하는 예제입니다. 애니메이션 진행률이 30% 지점에 도달했을 때 왼쪽 마진이 20px로 늘어나면서 요소가 자연스럽게 밀려나는 효과를 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: gray;
animation: myanim 3s infinite;
color: white;
}
@keyframes myanim {
30% {
margin-left: 20px;
}
}
</style>
</head>
<body>
<h2>Heading One</h2>
<div>
This is demo text.
</div>
</body>
</html>코드 설명
1. @keyframes 규칙 정의
@keyframes myanim에서 애니메이션 이름을 지정합니다. 30%는 전체 애니메이션 시간 중 30%가 경과한 시점을 의미하며, 이때 margin-left: 20px;가 적용됩니다. 시작(0%)과 끝(100%) 지점을 별도로 지정하지 않으면 요소의 기본 스타일 값이 사용됩니다.
2. animation 속성 적용
div 요소에 animation: myanim 3s infinite;를 설정했습니다. 각 값의 의미는 다음과 같습니다.
- myanim: 적용할 @keyframes 이름
- 3s: 한 사이클의 지속 시간 (3초)
- infinite: 무한 반복 재생
활용 팁
마진 변화량을 조절하고 싶다면 margin-left 값을 변경하면 됩니다. 예를 들어 50%, 100% 등 여러 지점을 추가하면 더욱 다양한 움직임을 연출할 수 있습니다. 다만 성능 측면에서는 margin보다 transform: translateX()를 사용하는 것이 레이아웃 재계산을 줄여 더 부드러운 애니메이션을 구현할 수 있다는 점도 참고하세요.