CSS의 @keyframes 규칙과 animation 속성을 활용하면 JavaScript 없이도 요소에 다양한 회전 애니메이션 효과를 적용할 수 있습니다. 이번 글에서는 그중 rotateInUpLeft 효과, 즉 요소가 왼쪽 아래 모서리를 기준점으로 회전하면서 화면에서 사라지는 애니메이션을 구현하는 방법을 예제 코드와 함께 살펴보겠습니다.
핵심 개념 정리
- transform-origin: left bottom — 회전의 기준점을 요소의 왼쪽 아래 모서리로 지정합니다.
- @keyframes — 애니메이션의 시작(0%)과 끝(100%) 상태를 단계별로 정의합니다.
- animation-duration — 애니메이션이 한 번 실행되는 데 걸리는 시간을 설정합니다.
- animation-fill-mode: both — 애니메이션 시작 전과 종료 후에도 키프레임의 스타일이 유지되도록 합니다.
- -webkit- 접두사 — 구버전 Safari, Chrome 등 웹킷 기반 브라우저와의 호환성을 위해 함께 작성해 주는 것이 좋습니다.
예제 코드
아래 예제를 실행하면 로고 이미지가 왼쪽 아래를 축으로 회전하며 서서히 사라지는 것을 확인할 수 있습니다. 페이지 하단의 버튼을 클릭하면 페이지가 새로고침되면서 애니메이션을 다시 재생할 수 있습니다.
<!DOCTYPE html>
<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 rotateInUpLeft {
0% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
opacity: 0;
}
}
@keyframes rotateInUpLeft {
0% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: left bottom;
transform: rotate(-90deg);
opacity: 0;
}
}
.rotateInUpLeft {
-webkit-animation-name: rotateInUpLeft;
animation-name: rotateInUpLeft;
}
</style>
</head>
<body>
<div id="animated-example" class="animated rotateInUpLeft"></div>
<button onclick="myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>
코드 동작 방식
애니메이션은 rotateInUpLeft라는 이름의 키프레임을 따라 동작합니다. 시작 지점(0%)에서는 요소가 제자리에서 완전히 불투명한 상태(opacity: 1, rotate(0))로 있다가, 종료 지점(100%)에 도달하면 왼쪽 아래 모서리를 축으로 -90도 회전하면서 완전히 투명해집니다(opacity: 0).
transform-origin 값을 변경하면 회전 축의 위치를 자유롭게 조절할 수 있고, 회전 각도나 animation-duration 값을 수정하여 다양한 변형 효과를 손쉽게 만들어 볼 수 있습니다.