CSS만으로 이미지나 요소가 화면 아래에서 위로 크게 이동하면서 서서히 나타나는 페이드 인 업 빅(Fade In Up Big) 애니메이션 효과를 구현할 수 있습니다. 아래 예제 코드를 그대로 실행하면 동작 과정을 직접 확인할 수 있습니다.
핵심 개념 이해하기
1. @keyframes로 애니메이션 흐름 정의
@keyframes fadeInUpBig 규칙은 애니메이션의 시작(0%)과 끝(100%) 상태를 정의합니다. 시작 시점에는 요소가 opacity: 0(완전히 투명) 상태로 translateY(2000px)만큼 아래쪽에 위치하고, 종료 시점에는 opacity: 1이 되면서 원래 위치로 돌아옵니다. -webkit- 접두사가 붙은 코드는 구버전 Safari 등 웹킷 기반 브라우저와의 호환성을 위해 함께 작성한 것입니다.
2. animation-duration과 animation-fill-mode
animation-duration: 10s는 애니메이션이 진행되는 총 시간을 10초로 지정합니다. 또한 animation-fill-mode: both를 설정하면 애니메이션이 적용되기 전과 끝난 후에도 해당 스타일 상태가 유지되어, 요소가 깜빡이거나 사라지지 않고 자연스럽게 연출됩니다.
전체 예제 코드
<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 fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@keyframes fadeInUpBig {
0% {
opacity: 0;
transform: translateY(2000px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
animation-name: fadeInUpBig;
}
</style>
</head>
<body>
<div id="animated-example" class="animated fadeInUpBig"></div>
<button onclick="myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>
실행 결과와 활용 팁
위 코드를 브라우저에서 열면 로고 이미지가 화면 하단에서 천천히 올라오며 나타납니다. 페이지의 Reload page 버튼을 클릭하면 자바스크립트의 location.reload() 함수가 호출되어 페이지가 새로 고침되고, 애니메이션을 처음부터 다시 재생할 수 있습니다.
효과를 조절하고 싶다면 몇 가지 값을 변경해 보세요. animation-duration을 1s나 2s로 줄이면 더 빠르고 경쾌한 연출이 가능하고, translateY의 이동 거리(2000px)를 500px 정도로 줄이면 보다 은은하고 세련된 등장 효과를 만들 수 있습니다. 배너, 카드 UI, 섹션 콘텐츠의 등장 애니메이션으로 폭넓게 활용해 보세요.