CSS만으로 이미지나 요소에 페이드 인 업(Fade In Up) 효과를 손쉽게 구현할 수 있습니다. 이 효과는 요소가 아래에서 위로 살짝 떠오르듯 이동하면서 서서히 나타나는 애니메이션으로, JavaScript 없이 순수 CSS만으로도 웹 페이지에 역동적이고 세련된 느낌을 더할 수 있습니다.
핵심 CSS 속성 이해하기
- animation-duration: 애니메이션이 한 번 실행되는 데 걸리는 시간을 지정합니다.
- animation-fill-mode: both: 애니메이션 시작 전과 종료 후에도 해당 스타일 상태를 유지합니다.
- @keyframes: 애니메이션의 시작(0%)과 끝(100%) 시점의 스타일을 정의합니다.
- transform: translateY(): 요소를 세로 방향으로 이동시켜 '위로 떠오르는' 효과를 만듭니다.
예제 코드
다음 코드를 실행하면 로고 이미지가 아래에서 위로 떠오르며 서서히 나타납니다.
<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 fadeInUp {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
</style>
</head>
<body>
<div id="animated-example" class="animated fadeInUp"></div>
<button onclick="myFunction()">페이지 다시 불러오기</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>
코드 작동 방식
- .animated 클래스: 배경 이미지와 애니메이션의 기본 설정(지속 시간 10초, fill-mode both)을 담당합니다.
- @keyframes fadeInUp: 시작 시점(0%)에는 투명도가 0인 상태에서 30px 아래에 위치하고, 종료 시점(100%)에는 완전히 불투명해진 채 원래 위치로 이동합니다.
- .fadeInUp 클래스: 대상 요소에 fadeInUp 키프레임을 연결하여 애니메이션을 실행합니다.
- -webkit- 접두사: 구버전 Safari, Chrome 등 WebKit 기반 브라우저와의 호환성을 위해 함께 작성하는 것이 좋습니다.
하단의 버튼을 클릭하면 페이지가 새로 고침되어 애니메이션 효과를 다시 확인할 수 있습니다.
활용 팁
- 속도 조절: animation-duration 값을 1s처럼 짧게 설정하면 더 빠르게 나타나는 효과를 연출할 수 있습니다.
- 이동 거리 조절: translateY 값(예: 50px)을 변경하면 요소가 떠오르는 거리를 자유롭게 조정할 수 있습니다.
- 부드러운 가속: animation-timing-function: ease-out을 추가하면 시작은 빠르고 끝은 느린 자연스러운 움직임을 만들 수 있습니다.