CSS의 lightSpeedIn 애니메이션은 요소가 화면 오른쪽 바깥에서 빛처럼 빠르게 날아들어 제자리에 착지하는 듯한 역동적인 등장 효과를 만들어 줍니다. @keyframes 규칙과 transform, opacity 속성을 조합하면 별도의 JavaScript 없이도 순수 CSS만으로 이 효과를 구현할 수 있습니다.
애니메이션 동작 원리
lightSpeedIn 효과는 다음과 같은 단계로 진행됩니다.
- 0% – 요소가 X축으로 100% 이동한 상태(화면 오른쪽 바깥)에서 -30도 기울어진 채 투명(
opacity: 0)하게 시작합니다. - 60% – 반대 방향으로 20% 정도 살짝 지나치듯 이동하며 +30도로 기울고, 화면에 완전히 나타납니다.
- 80% – 제자리로 되돌아오면서 기울기가 -15도로 줄어듭니다.
- 100% – 기울기 없이 최종 위치에 안정적으로 자리 잡으며 애니메이션이 종료됩니다.
예제 코드
아래 전체 코드를 실행하면 로고 이미지가 광속처럼 빠르게 등장하는 효과를 직접 확인할 수 있습니다.
<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 lightSpeedIn {
0% {
-webkit-transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: translateX(-20%) skewX(30deg);
opacity: 1;
}
80% {
-webkit-transform: translateX(0%) skewX(-15deg);
opacity: 1;
}
100% {
-webkit-transform: translateX(0%) skewX(0deg);
opacity: 1;
}
}
@keyframes lightSpeedIn {
0% {
transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
60% {
transform: translateX(-20%) skewX(30deg);
opacity: 1;
}
80% {
transform: translateX(0%) skewX(-15deg);
opacity: 1;
}
100% {
transform: translateX(0%) skewX(0deg);
opacity: 1;
}
}
.lightSpeedIn {
-webkit-animation-name: lightSpeedIn;
animation-name: lightSpeedIn;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
.animated.lightSpeedIn {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
}
</style>
</head>
<body>
<div id = "animated-example" class = "animated lightSpeedIn"></div>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>
핵심 포인트 정리
-webkit-접두사를 함께 작성하여 Safari 등 구형 WebKit 기반 브라우저에서도 동일하게 동작하도록 호환성을 확보했습니다.animation-timing-function: ease-out을 적용해 애니메이션이 끝으로 갈수록 느려지는 자연스러운 감속 느낌을 연출합니다.animation-fill-mode: both는 애니메이션 시작 전과 종료 후에도 해당 프레임의 스타일 상태가 유지되도록 합니다..animated.lightSpeedIn선택자에서 지속 시간을 0.5초로 짧게 설정하여 '광속'다운 빠른 속도감을 더욱 강조했습니다.
하단의 'Reload page' 버튼을 클릭하면 페이지가 새로고침되어 애니메이션 효과를 반복해서 확인할 수 있습니다. 이 기법은 배너, 팝업, 섹션 헤더 등 주목도가 필요한 요소에 활용하기 좋습니다.