CSS만을 사용하여 이미지에 Fade Out Right Big(오른쪽 크게 페이드 아웃) 애니메이션 효과를 적용하는 방법을 알아보겠습니다. 이 효과는 요소가 화면 오른쪽으로 멀리 이동하면서 동시에 서서히 사라지는 연출로, 콘텐츠 종료 장면이나 페이지 전환 효과에 활용하기 좋습니다.
동작 원리
이 애니메이션은 @keyframes 규칙으로 시작점(0%)과 끝점(100%)의 상태를 정의하고, animation-name 속성으로 해당 키프레임을 요소에 연결하는 방식으로 구현됩니다.
- opacity: 1에서 0으로 변화하며 요소가 점진적으로 투명해집니다.
- transform: translateX(): X축 방향으로 0px에서 2000px까지 이동하여 요소가 화면 오른쪽 밖으로 밀려나갑니다.
- -webkit- 접두사: Safari 등 구형 WebKit 기반 브라우저와의 호환성을 위해 함께 작성합니다.
전체 예제 코드
아래 코드를 그대로 실행하면 로고 이미지가 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 fadeOutRightBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
}
@keyframes fadeOutRightBig {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(2000px);
}
}
.fadeOutRightBig {
-webkit-animation-name: fadeOutRightBig;
animation-name: fadeOutRightBig;
}
</style>
</head>
<body>
<div id = "animated-example" class = "animated fadeOutRightBig"></div>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>코드 설명
.animated 클래스
배경 이미지를 지정하고 animation-duration: 10s로 애니메이션 지속 시간을 10초로 설정합니다. 또한 animation-fill-mode: both를 지정하여 애니메이션이 시작 전과 종료 후에도 해당 상태의 스타일을 유지하도록 합니다.
@keyframes fadeOutRightBig
애니메이션 시작 시점(0%)에는 불투명도 1과 이동 거리 0px, 종료 시점(100%)에는 불투명도 0과 이동 거리 2000px를 정의합니다. 덕분에 요소는 오른쪽으로 멀어지면서 자연스럽게 사라집니다.
.fadeOutRightBig 클래스
animation-name 속성으로 위에서 정의한 키프레임을 요소에 연결합니다. HTML에서는 animated fadeOutRightBig 두 클래스를 함께 지정하여 효과를 적용합니다.
참고 사항
버튼을 클릭하면 location.reload() 함수가 호출되어 페이지가 새로고침되고, 애니메이션을 다시 확인할 수 있습니다. 최신 브라우저에서는 -webkit- 접두사 없이 표준 속성만 사용해도 대부분 정상 동작하지만, 더 넓은 브라우저 호환성을 위해 두 가지를 모두 작성하는 것이 안전합니다.