CSS만 활용하면 별도의 JavaScript 라이브러리 없이도 이미지에 페이드 인 레프트 빅(Fade In Left Big) 애니메이션 효과를 손쉽게 적용할 수 있습니다. 이 효과는 요소가 화면 왼쪽 바깥에서 미끄러지듯 들어오면서 동시에 서서히 선명해지는 연출로, 웹 페이지에 역동적인 첫인상을 더하고 싶을 때 유용하게 사용됩니다.
핵심 개념 정리
- @keyframes: 애니메이션의 시작(0%)과 끝(100%) 시점의 상태를 정의하는 규칙입니다.
- opacity: 값을 0에서 1로 변화시켜 요소가 점점 나타나는 페이드 인 효과를 만듭니다.
- transform: translateX(): 요소를 X축 방향으로 이동시켜 왼쪽에서 슬라이드되는 움직임을 구현합니다.
- animation-fill-mode: both; 애니메이션이 시작되기 전과 끝난 후에도 지정된 스타일 상태를 유지하도록 합니다.
예제 코드
아래 코드를 실행하면 로고 이미지가 왼쪽 화면 밖에서 페이드 인되며 나타나는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<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 fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@keyframes fadeInLeftBig {
0% {
opacity: 0;
transform: translateX(-2000px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig;
animation-name: fadeInLeftBig;
}
</style>
</head>
<body>
<div id="animated-example" class="animated fadeInLeftBig"></div>
<button onclick="myFunction()">페이지 다시 불러오기</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>
코드 동작 방식
애니메이션은 두 단계로 진행됩니다. 먼저 0% 시점에는 요소가 opacity: 0으로 완전히 투명한 상태에서 translateX(-2000px)만큼 화면 왼쪽 바깥에 위치합니다. 그런 다음 100% 시점까지 원래 위치(translateX(0))로 이동하면서 opacity: 1이 되어 완전히 선명해집니다. 이동 거리인 -2000px 값은 필요에 따라 조절할 수 있으며, 값이 클수록 더 멀리서 등장하는 듯한 효과를 냅니다.
버튼을 클릭하면 location.reload() 함수가 호출되어 페이지가 새로고침되고, 애니메이션을 처음부터 다시 확인할 수 있습니다.
참고 사항
코드에 -webkit- 접두사가 포함된 속성들이 있는데, 이는 구버전 Safari 등 WebKit 기반 브라우저와의 호환성을 위한 것입니다. 최신 브라우저에서는 표준 @keyframes와 animation 속성만으로도 대부분 정상적으로 동작하지만, 다양한 환경을 지원해야 한다면 접두사를 함께 작성해 두는 것이 안전합니다.