CSS로 왼쪽 페이드 인(Fade In Left) 애니메이션 효과 구현하기

웹 페이지에서 이미지나 콘텐츠가 왼쪽에서 서서히 나타나는 페이드 인 레프트(Fade In Left) 효과는 시각적인 흐름을 자연스럽게 만들어 주는 대표적인 CSS 애니메이션입니다. JavaScript 없이 순수 CSS만으로도 간단하게 구현할 수 있으며, @keyframes 규칙과 animation 관련 속성을 활용합니다.

핵심 원리

페이드 인 레프트 애니메이션은 다음 두 가지 속성의 변화를 조합합니다.

opacity: 값이 0에서 1로 변하면서 요소가 투명한 상태에서 점점 선명하게 나타납니다.
transform: translateX(): X축 이동 거리를 -20px에서 0으로 변경해 왼쪽에서 오른쪽으로 살짝 밀려 들어오는 효과를 만듭니다.

예제 코드

아래 전체 예제를 실행하면 로고 이미지가 10초에 걸쳐 왼쪽에서 페이드 인됩니다. 하단의 [Reload page] 버튼을 누르면 페이지가 새로고침되어 애니메이션을 반복해서 확인할 수 있습니다.

<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 fadeInLeft {
   0% {
      opacity: 0;
      -webkit-transform: translateX(-20px);
   }
   100% {
      opacity: 1;
      -webkit-transform: translateX(0);
   }
}

@keyframes fadeInLeft {
   0% {
      opacity: 0;
      transform: translateX(-20px);
   }
   100% {
      opacity: 1;
      transform: translateX(0);
   }
}

.fadeInLeft {
   -webkit-animation-name: fadeInLeft;
   animation-name: fadeInLeft;
}
</style>
</head>
<body>

<div id="animated-example" class="animated fadeInLeft"></div>
<button onclick="myFunction()">Reload page</button>

<script>
function myFunction() {
   location.reload();
}
</script>

</body>
</html>

코드 설명

.animated 클래스: 배경 이미지의 위치와 여백 등 기본 스타일을 지정하고, 애니메이션 지속 시간(animation-duration: 10s)과 종료 후 상태 유지(animation-fill-mode: both)를 설정합니다.
@keyframes fadeInLeft: 애니메이션 시작(0%)에는 투명도 0과 X축 -20px 위치에서, 끝(100%)에는 투명도 1과 원래 위치에서 동작하도록 정의합니다. -webkit- 접두사 버전은 Safari 등 구형 웹킷 기반 브라우저와의 호환성을 위해 함께 작성한 것입니다.
.fadeInLeft 클래스: 정의한 keyframes를 실제 요소에 적용하는 역할을 합니다.
Reload 버튼: location.reload()로 페이지를 새로 고침하여 애니메이션을 처음부터 다시 재생합니다.

참고 사항

원본 예제 코드에는 선택자 없이 단독으로 선언된 animation-name: fadeInDown; 구문이 포함되어 있었는데, 이는 유효하지 않은 CSS이므로 제거했습니다. 또한 최신 브라우저에서는 -webkit- 접두사 없이 표준 @keyframes만으로도 대부분 정상 동작하지만, 구형 브라우저까지 지원해야 한다면 접두사 버전을 함께 유지하는 것이 안전합니다. 애니메이션 속도를 조절하고 싶다면 animation-duration 값을 10s 대신 1s~2s처럼 짧게 설정해 보세요.