CSS만으로 이미지가 서쪽에서 동쪽으로 이동하며 서서히 사라지는 페이드 아웃 라이트(Fade Out Right) 애니메이션 효과를 구현할 수 있습니다. 핵심은 @keyframes 규칙으로 애니메이션의 시작과 끝 상태를 정의하고, opacity와 transform 속성을 조합하는 것입니다.
핵심 CSS 속성 살펴보기
- @keyframes: 애니메이션의 각 단계(0% ~ 100%)에서 요소의 상태를 정의합니다.
- animation-duration: 애니메이션이 한 번 실행되는 데 걸리는 시간을 지정합니다.
- animation-fill-mode: both: 애니메이션 시작 전과 종료 후에도 최종 스타일이 유지되도록 설정합니다.
- opacity: 값이 1에서 0으로 변하면서 요소가 점점 투명해집니다.
- transform: translateX(): 요소를 X축 방향으로 이동시켜 오른쪽으로 밀려나는 효과를 만듭니다.
전체 예제 코드
아래 코드를 실행하면 로고 이미지가 오른쪽으로 이동하면서 천천히 사라지는 것을 확인할 수 있습니다. [페이지 다시 불러오기] 버튼을 클릭하면 애니메이션을 반복해서 볼 수 있습니다.
<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 fadeOutRight {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(20px);
}
}
@keyframes fadeOutRight {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(20px);
}
}
.fadeOutRight {
-webkit-animation-name: fadeOutRight;
animation-name: fadeOutRight;
}
</style>
</head>
<body>
<div id="animated-example" class="animated fadeOutRight"></div>
<button onclick="myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>코드 동작 원리
애니메이션은 fadeOutRight라는 이름의 @keyframes 규칙에 따라 진행됩니다. 시작 시점(0%)에는 opacity: 1로 완전히 보이는 상태이며, 종료 시점(100%)에는 opacity: 0이 되어 완전히 사라집니다. 동시에 translateX(20px) 덕분에 요소가 오른쪽으로 20px 이동합니다.
-webkit- 접두사가 붙은 코드는 구버전 Safari 등 웹킷 기반 브라우저와의 호환성을 위한 것이며, 최신 브라우저에서는 표준 문법만으로도 정상적으로 동작합니다.