CSS를 활용하면 자바스크립트 없이도 이미지나 요소에 다양한 애니메이션 효과를 손쉽게 적용할 수 있습니다. 이번 글에서는 요소가 화면 왼쪽으로 멀리 이동하면서 서서히 사라지는 페이드 아웃 레프트 빅(Fade Out Left Big) 애니메이션 효과를 구현하는 방법을 알아보겠습니다. 아래 예제 코드를 실행하여 직접 확인해 보세요.
예제 코드
<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 fadeOutLeftBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
}
@keyframes fadeOutLeftBig {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-2000px);
}
}
.fadeOutLeftBig {
-webkit-animation-name: fadeOutLeftBig;
animation-name: fadeOutLeftBig;
}
</style>
</head>
<body>
<div id="animated-example" class="animated fadeOutLeftBig"></div>
<button onclick="myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>
코드 설명
- @keyframes fadeOutLeftBig: 애니메이션의 흐름을 정의합니다. 시작 지점(0%)에서는 불투명도(opacity)가 1이고 X축 위치가 0이며, 종료 지점(100%)에서는 불투명도가 0이 되고 X축 방향으로
-2000px만큼 이동하여 화면 밖 왼쪽으로 사라지게 됩니다. - animation-duration: 10s: 애니메이션이 시작부터 끝까지 진행되는 총 시간을 10초로 설정합니다. 값을 줄이면 더 빠르게 사라집니다.
- animation-fill-mode: both: 애니메이션이 종료된 후에도 마지막 상태(완전히 사라진 상태)가 유지되도록 합니다.
- -webkit- 접두사: Safari 등 구버전 WebKit 기반 브라우저와의 호환성을 위해 함께 작성해 주는 것이 좋습니다.
버튼을 클릭하면 페이지가 새로고침되어 애니메이션을 반복해서 확인할 수 있습니다. 이처럼 CSS의 @keyframes와 transform, opacity 속성만 조합하면 별도의 라이브러리 없이도 부드러운 퇴장 애니메이션을 만들 수 있습니다.