/* 스티커 애니메이션 템플릿 카탈로그 ───────────────────────────────────── 현재 index.html/base.html에 흩어져서 각 스티커별로 하드코딩돼있던 애니메이션들을 전부 모아서 이름 붙이고 정리한 참고용 파일입니다. - 이 파일은 아직 어느 화면()에도 연결(link)되어 있지 않습니다. 실제 화면에는 아무 영향이 없습니다 — 나중에 관리자에서 스티커별로 애니메이션을 고를 수 있게 만들 때 이 카탈로그를 기반으로 연결할 예정입니다. - 키프레임 이름은 기존 것과 겹치지 않도록 전부 stka- 접두사를 붙였습니다. - 각 항목은 `.stk-anim-{키}` 유틸리티 클래스로도 바로 붙여볼 수 있게 만들어뒀습니다(스티커 에 이 클래스만 추가하면 해당 애니메이션이 적용됨). 분류 (8종): 1. sway 흔들림 — 살짝 불규칙하게 좌우로 흔들리며 숨쉬듯 크기도 미세하게 변함 2. glow 반짝임 — 밝기·발광 효과가 은은하게 커졌다 작아짐 3. slide 좌우이동 — 옆에서 미끄러져 들어왔다 나갔다 반복 4. swing 그네흔들림 — 위쪽 한 점에 매달린 것처럼 좌우로 크게 흔들림(펜듈럼) 5. zoom 확대 — 커졌다 작아졌다 펄스처럼 반복 6. bounce 통통튕김 — 탱탱볼처럼 여러 단계로 튕기듯 크기가 변함 7. tilt 기울임 — 한쪽 방향으로 기울었다가 원위치 8. float 둥실둥실 — 위아래로 둥둥 떠다니며 살짝 회전 */ /* 1. 흔들림 (sway) — 원본: base.html .stk-tr(stk-tr-sway) */ @keyframes stka-sway{ 0% {transform:rotate(0deg) scale(1)} 18% {transform:rotate(-2.8deg) scale(1.018)} 42% {transform:rotate(3.5deg) scale(0.993)} 65% {transform:rotate(-1.1deg) scale(1.013)} 83% {transform:rotate(4.4deg) scale(1.005)} 100% {transform:rotate(0deg) scale(1)} } .stk-anim-sway{ transform-origin:60% 8%; animation:stka-sway 7s ease-in-out infinite; } /* 2. 반짝임 (glow) — 원본: base.html .stk-tr(stk-tr-glow) */ @keyframes stka-glow{ 0%,100%{filter:brightness(1)} 30% {filter:drop-shadow(0 0 4px rgba(255,255,255,.35)) brightness(1.07)} 70% {filter:drop-shadow(0 0 6px rgba(255,255,255,.2)) brightness(1.04)} } .stk-anim-glow{ animation:stka-glow 4.3s ease-in-out infinite; } /* 3. 좌우이동 (slide) — 원본: index.html .s-car(car-drive-in) */ @keyframes stka-slide{ from{transform:translateX(-160px) rotate(-6deg);opacity:.6} to {transform:translateX(0) rotate(0deg); opacity:1} } .stk-anim-slide{ animation:stka-slide 2s ease-in-out infinite alternate; } /* 4. 그네흔들림 (swing) — 원본: index.html .drmt-img(drmt-sway) */ @keyframes stka-swing{ 0%,100%{transform:rotate(0deg)} 25% {transform:rotate(15deg)} 75% {transform:rotate(-15deg)} } .stk-anim-swing{ transform-origin:bottom center; animation:stka-swing 5s ease-in-out infinite; } /* 5. 확대 (zoom) — 원본: index.html .s-hydrangea/.s-teacup(sticker-pulse) */ @keyframes stka-zoom{ 0%,100%{transform:scale(1)} 50% {transform:scale(1.07)} } .stk-anim-zoom{ animation:stka-zoom 3s ease-in-out infinite; } /* 6. 통통튕김 (bounce) — 원본: index.html .s2-orange(orange-bounce) */ @keyframes stka-bounce{ 0%,100%{transform:scale(1)} 20% {transform:scale(.94)} 40% {transform:scale(1.04)} 60% {transform:scale(.97)} 80% {transform:scale(1.02)} } .stk-anim-bounce{ animation:stka-bounce 3s ease-in-out infinite; } /* 7. 기울임 (tilt) — 원본: index.html .s2-s10(letters-tilt) */ @keyframes stka-tilt{ 0%,100%{transform:rotate(0deg)} 50% {transform:rotate(10deg)} } .stk-anim-tilt{ animation:stka-tilt 6s ease-in-out infinite; } /* 8. 둥실둥실 (float) — 원본: index.html .s2-butterflies(coaster-float) */ @keyframes stka-float{ 0%,100%{transform:translateY(0) rotate(0deg)} 30% {transform:translateY(-8px) rotate(2deg)} 70% {transform:translateY(-4px) rotate(-2deg)} } .stk-anim-float{ animation:stka-float 4s ease-in-out infinite; }