웹 페이지에서 요소가 빛의 속도처럼 화면 오른쪽 밖으로 사라지는 라이트 스피드 아웃(Light Speed Out) 효과는 CSS의 @keyframes와 transform 속성만으로 간단하게 구현할 수 있습니다.
핵심 원리는 다음과 같습니다.
translateX(100%): 요소를 화면 오른쪽 끝까지 이동시킵니다.skewX(-30deg): 요소를 기울여 고속으로 날아가는 듯한 역동적인 느낌을 줍니다.opacity: 0: 애니메이션이 끝날 때 요소를 서서히 투명하게 만들어 자연스럽게 사라지게 합니다.
아래는 완전하게 동작하는 예제 코드입니다. 버튼을 클릭하면 페이지가 새로고침되어 애니메이션을 다시 확인할 수 있습니다.
<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: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes lightSpeedOut {
0% {
-webkit-transform: translateX(0%) skewX(0deg);
opacity: 1;
}
100% {
-webkit-transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
}
@keyframes lightSpeedOut {
0% {
transform: translateX(0%) skewX(0deg);
opacity: 1;
}
100% {
transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
}
.lightSpeedOut {
-webkit-animation-name: lightSpeedOut;
animation-name: lightSpeedOut;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
.animated.lightSpeedOut {
-webkit-animation-duration: 0.25s;
animation-duration: 0.25s;
}
</style>
</head>
<body>
<div id = "animated-example" class = "animated lightSpeedOut"></div>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>코드 설명
1. 기본 설정 (.animated 클래스)
.animated 클래스는 애니메이션의 지속 시간(animation-duration: 1s)과 채우기 모드(animation-fill-mode: both)를 정의합니다. both 값을 사용하면 애니메이션 시작 전과 종료 후에도 스타일이 유지됩니다.
2. 키프레임 정의 (@keyframes lightSpeedOut)
애니메이션 시작 시점(0%)에는 요소가 제자리에 있고, 종료 시점(100%)에는 오른쪽으로 이동하면서 -30도 기울어지고 투명해집니다. -webkit- 접두사가 붙은 키프레임은 Safari 등 구형 WebKit 기반 브라우저와의 호환성을 위한 것입니다.
3. 타이밍 함수 (ease-in)
ease-in 타이밍 함수를 적용하면 애니메이션이 느리게 시작되어 점점 빨라지는데, 이것이 마치 빛의 속도로 가속하는 듯한 효과를 만들어냅니다.
4. 실행 시간 조절
.animated.lightSpeedOut 선택자에서 지속 시간을 0.25s로 짧게 설정하여 순식간에 사라지는 역동적인 연출을 완성합니다.
이 효과는 팝업 닫기, 알림 제거, 화면 전환 등 다양한 UI 인터랙션에서 활용할 수 있습니다.