CSS 애니메이션을 활용하면 웹 페이지의 요소에 역동적인 효과를 손쉽게 적용할 수 있습니다. 그중 플립(Flip) 애니메이션은 요소가 순간적으로 빠르게 회전하며 뒤집히는 듯한 시각적 효과를 만들어 줍니다. 카드 UI, 이미지 갤러리, 버튼 인터랙션 등 다양한 곳에서 활용도가 높은 효과입니다.
플립 애니메이션의 핵심 원리
플립 효과는 크게 세 가지 CSS 기술이 조합되어 구현됩니다.
- @keyframes — 애니메이션의 시작(0%)부터 끝(100%)까지 각 단계별 상태를 정의합니다.
- transform: perspective() rotateY() — 원근감(perspective)을 부여하고 Y축을 중심으로 요소를 회전시켜 실제로 뒤집히는 듯한 입체감을 연출합니다.
- animation-timing-function — ease-out, ease-in 등의 타이밍 함수로 회전 속도의 가속·감속을 조절해 자연스러운 움직임을 만듭니다.
전체 예제 코드
아래 예제는 로고 이미지에 플립 애니메이션을 적용하고, 버튼 클릭 시 페이지를 새로고침하여 애니메이션을 다시 재생하는 완전한 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: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes flip {
0% {
-webkit-transform: perspective(400px) rotateY(0);
-webkit-animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
-webkit-animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-webkit-animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) rotateY(360deg) scale(.95);
-webkit-animation-timing-function: ease-in;
}
100% {
-webkit-transform: perspective(400px) scale(1);
-webkit-animation-timing-function: ease-in;
}
}
@keyframes flip {
0% {
transform: perspective(400px) rotateY(0);
animation-timing-function: ease-out;
}
40% {
transform: perspective(400px) translateZ(150px) rotateY(170deg);
animation-timing-function: ease-out;
}
50% {
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
animation-timing-function: ease-in;
}
80% {
transform: perspective(400px) rotateY(360deg) scale(.95);
animation-timing-function: ease-in;
}
100% {
transform: perspective(400px) scale(1);
animation-timing-function: ease-in;
}
}
.flip {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flip;
backface-visibility: visible !important;
animation-name: flip;
}
</style>
</head>
<body>
<div id = "animated-example" class = "animated flip"></div>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>코드 단계별 해설
1. 공통 스타일 (.animated)
배경 이미지를 지정하고 animation-duration: 1s로 애니메이션 전체 길이를 1초로 설정합니다. animation-fill-mode: both는 애니메이션이 시작 전과 종료 후에도 해당 프레임의 스타일을 유지하도록 하는 속성입니다.
2. 키프레임 정의 (@keyframes flip)
애니메이션은 다음 흐름으로 진행됩니다.
- 0% — 회전 없이 시작하며, ease-out으로 빠르게 가속합니다.
- 40% — Z축으로 150px 앞으로 이동하며 Y축 기준 170도까지 회전합니다.
- 50% — 190도까지 살짝 더 회전하며 뒤집기 동작을 완성합니다.
- 80% — 360도로 한 바퀴를 돌고 scale(.95)로 살짝 축소되어 착지감을 줍니다.
- 100% — 원래 크기(scale 1)로 복귀하며 애니메이션이 종료됩니다.
3. 애니메이션 적용 (.flip)
animation-name: flip으로 위에서 정의한 키프레임을 연결하고, backface-visibility: visible을 지정하여 요소가 뒤집히는 동안 뒷면도 화면에 보이도록 설정합니다.
브라우저 호환성 참고 사항
예제에는 -webkit- 접두사가 붙은 코드가 함께 작성되어 있습니다. 이는 구버전 Safari 및 일부 WebKit 기반 브라우저와의 호환성을 위한 것으로, 최신 브라우저에서는 표준 속성(@keyframes, transform, animation)만으로도 대부분 정상적으로 동작합니다. 다만 오래된 모바일 브라우저까지 지원해야 한다면 접두사를 유지하는 것이 안전합니다.
마무리
이처럼 @keyframes와 3D transform만 활용하면 자바스크립트 라이브러리 없이도 입체적인 플립 애니메이션을 구현할 수 있습니다. 회전 각도, 이동 거리, 타이밍 함수 값을 조절하면 자신만의 개성 있는 뒤집기 효과를 쉽게 만들어 보세요.