CSS의 @keyframes와 animation 속성을 활용하면 요소가 왼쪽 아래 모서리를 축으로 회전하면서 화면에 나타나는 rotateInDownLeft 애니메이션 효과를 손쉽게 구현할 수 있습니다. 아래 예제 코드를 실행하여 직접 확인해 보세요.
예제 코드
<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 rotateInDownLeft {
0% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInDownLeft {
0% {
transform-origin: left bottom;
transform: rotate(-90deg);
opacity: 0;
}
100% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
}
.rotateInDownLeft {
-webkit-animation-name: rotateInDownLeft;
animation-name: rotateInDownLeft;
}
</style>
</head>
<body>
<div id = "animated-example" class = "animated rotateInDownLeft"></div>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>코드 동작 원리
이 예제의 핵심은 transform-origin 속성입니다. left bottom으로 지정하면 요소의 왼쪽 하단 모서리가 회전의 축이 되어, 마치 경첩에 걸린 문처럼 자연스럽게 젖혀지듯 나타납니다.
@keyframes rotateInDownLeft 규칙은 애니메이션의 시작과 끝 상태를 정의합니다.
- 0%(시작): 요소가 왼쪽 아래를 축으로
-90deg만큼 회전한 상태에서 투명도가 0으로, 즉 화면에 보이지 않는 상태로 시작합니다. - 100%(종료): 회전각이 0도로 돌아오고 투명도가 1이 되어 요소가 완전히 나타납니다.
.animated 클래스에서는 animation-duration: 10s로 애니메이션이 10초에 걸쳐 진행되도록 설정했으며, animation-fill-mode: both를 지정해 애니메이션 시작 전과 종료 후에도 키프레임의 스타일이 유지되도록 했습니다. 또한 구형 WebKit 브라우저와의 호환성을 위해 -webkit- 접두사 버전을 함께 작성했습니다.
하단의 Reload page 버튼을 클릭하면 페이지가 새로고침되어 애니메이션을 반복해서 확인할 수 있습니다.