Tada 애니메이션 효과란?
Tada 애니메이션은 요소가 살짝 줄어들었다가 좌우로 기울며 흔들리는 듯한 움직임을 보여주는 CSS 애니메이션입니다. 주요 콘텐츠나 로고처럼 사용자의 시선을 끌고 싶은 요소에 적용하면 효과적이며, 별도의 JavaScript 없이 순수 CSS의 @keyframes 규칙만으로 간단하게 구현할 수 있습니다.
CSS Tada 애니메이션 예제
아래 전체 코드를 실행하면 이미지 요소에 Tada 애니메이션이 적용되는 것을 확인할 수 있습니다.
<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 tada {
0% {-webkit-transform: scale(1);}
10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
100% {-webkit-transform: scale(1) rotate(0);}
}
@keyframes tada {
0% {transform: scale(1);}
10%, 20% {transform: scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
100% {transform: scale(1) rotate(0);}
}
.tada {
-webkit-animation-name: tada;
animation-name: tada;
}
</style>
</head>
<body>
<div id = "animated-example" class = "animated tada"></div>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>
코드 핵심 설명
1. @keyframes로 애니메이션 동작 정의하기
@keyframes tada 규칙은 애니메이션의 각 시점별 상태를 백분율(%)로 정의합니다. 이 예제에서는 다음과 같은 흐름으로 동작합니다.
- 0%: 원래 크기(
scale(1))에서 시작합니다. - 10%~20%: 크기를 0.9배로 줄이고 -3도 회전하며 살짝 움츠러듭니다.
- 30%~90%: 크기를 1.1배로 확대한 상태에서 ±3도씩 좌우로 기울며 흔들립니다.
- 100%: 원래 크기와 회전각(0도)으로 돌아가며 애니메이션이 종료됩니다.
2. 크로스 브라우저 호환성 처리
-webkit- 접두사가 붙은 속성들은 Safari 등 WebKit 기반 브라우저를 위한 것입니다. 최신 브라우저 대부분은 표준 @keyframes와 transform 속성을 지원하지만, 구형 브라우저 호환성을 위해 두 버전을 함께 작성하는 것이 안전합니다.
3. 주요 애니메이션 속성
- animation-name: 적용할
@keyframes이름(tada)을 지정합니다. - animation-duration: 애니메이션 한 사이클의 지속 시간을 설정합니다. 예제에서는 10초로 설정되어 있습니다.
- animation-fill-mode: both: 애니메이션 시작 전과 종료 후에도 스타일 상태가 유지되도록 합니다.
마무리
이처럼 CSS의 @keyframes와 transform 속성을 조합하면 외부 라이브러리 없이도 Tada 같은 재미있는 애니메이션 효과를 손쉽게 만들 수 있습니다. 지속 시간이나 회전 각도 값을 조절해 프로젝트에 맞는 느낌으로 응용해 보세요.