CSS만으로 이미지나 요소에 페이드아웃 레프트(Fade Out Left) 애니메이션 효과를 적용할 수 있습니다. 이 효과는 요소가 서서히 사라지면서 동시에 왼쪽 방향으로 이동하는 애니메이션으로, 콘텐츠 전환이나 요소 제거 시 자연스러운 연출을 위해 널리 사용됩니다.
동작 원리
페이드아웃 레프트 효과는 두 가지 CSS 속성의 조합으로 구현됩니다.
- opacity: 1(불투명)에서 0(투명)으로 변경하여 요소를 서서히 사라지게 합니다.
- transform: translateX(): X축을 따라 음수 값(-20px)만큼 이동시켜 왼쪽 방향 움직임을 만듭니다.
예제 코드
아래 코드를 실행하면 로고 이미지가 10초에 걸쳐 왼쪽으로 이동하며 서서히 사라지는 것을 확인할 수 있습니다.
<html>
<head>
<style>
.animated {
background-image: url(/css/images/logo.png);
background-repeat: no-repeat;
background-position: left top;
padding-top:95px;
margin-bottom:60px;
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeOutLeft {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-20px);
}
}
@keyframes fadeOutLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-20px);
}
}
.fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
animation-name: fadeOutLeft;
}
</style>
</head>
<body>
<div id="animated-example" class="animated fadeOutLeft"></div>
<button onclick="myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>코드 핵심 포인트
1. @keyframes로 애니메이션 정의
@keyframes fadeOutLeft 규칙은 애니메이션의 시작(0%)과 끝(100%) 상태를 정의합니다. 시작 시점에는 opacity: 1과 translateX(0), 종료 시점에는 opacity: 0과 translateX(-20px)를 지정하여 투명해지면서 왼쪽으로 이동하도록 만듭니다.
2. 벤더 프리픽스(-webkit-)의 역할
-webkit- 접두사가 붙은 속성은 Safari 등 구형 WebKit 기반 브라우저와의 호환성을 위한 것입니다. 최신 브라우저에서는 표준 문법만으로도 대부분 동작하지만, 더 넓은 브라우저 지원이 필요하다면 함께 작성하는 것이 좋습니다.
3. 주요 애니메이션 속성
- animation-duration: 10s — 애니메이션이 완료되기까지 걸리는 시간을 설정합니다.
- animation-fill-mode: both — 애니메이션이 끝난 후에도 마지막 상태(opacity: 0)를 유지합니다. 이 속성이 없으면 애니메이션 종료 후 요소가 다시 나타납니다.
- animation-name: fadeOutLeft — 적용할 @keyframes 규칙의 이름을 지정합니다.
응용 팁
애니메이션 속도를 조절하고 싶다면 animation-duration 값을 변경하세요. 예를 들어 2s로 설정하면 2초 만에 빠르게 사라집니다. 또한 translateX(-20px)의 값을 키우면 더 멀리, 줄이면 더 가깝게 이동합니다. ease-in-out 같은 타이밍 함수를 animation-timing-function 속성으로 추가하면 더욱 부드러운 움직임을 연출할 수 있습니다.