弹簧缩放

{
  "slug": "elastic-scale",
  "name": "弹簧缩放",
  "nameEn": "Elastic Scale",
  "description": "元素以弹簧物理效果入场，多次过冲和回弹后稳定，比 bounce-in 更夸张的弹性感。",
  "descriptionEn": "Element enters with spring physics, overshooting and rebounding multiple times. More elastic than bounce-in.",
  "category": "entrance",
  "tags": [
    "elastic",
    "spring",
    "scale",
    "entrance",
    "physics"
  ],
  "trigger": "on-mount",
  "difficulty": "intermediate",
  "duration": "800ms",
  "easing": "cubic-bezier(0.34, 1.56, 0.64, 1)",
  "cssProperties": [
    "opacity",
    "transform"
  ],
  "isGPUAccelerated": true,
  "previewBg": "gradient",
  "keywords": [
    "elastic",
    "spring",
    "bounce",
    "overshoot",
    "physics",
    "entrance",
    "playful"
  ],
  "useCases": [
    "Notification badge pop-in",
    "Achievement unlock animation",
    "Playful button entrance",
    "Game UI element appearance"
  ],
  "relatedAnimations": [
    "bounce-in",
    "scale-in"
  ],
  "recommendedStyles": [
    "neo-brutalist",
    "retro-gaming",
    "soft-ui"
  ],
  "codeSnippets": [
    {
      "label": "CSS Keyframes",
      "language": "css",
      "code": "@keyframes elastic-scale {\n  0% {\n    opacity: 0;\n    transform: scale(0);\n  }\n  40% {\n    opacity: 1;\n    transform: scale(1.16);\n  }\n  60% {\n    transform: scale(0.92);\n  }\n  75% {\n    transform: scale(1.05);\n  }\n  90% {\n    transform: scale(0.98);\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n.elastic-scale {\n  --sk-duration: 800ms;\n  --sk-delay: 0ms;\n  --sk-ease: cubic-bezier(0.34, 1.56, 0.64, 1);\n  will-change: transform, opacity;\n  animation: elastic-scale var(--sk-duration) var(--sk-ease) var(--sk-delay) both;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .elastic-scale {\n    animation: none;\n    opacity: 1;\n    transform: none;\n  }\n}"
    },
    {
      "label": "Tailwind CSS",
      "language": "css",
      "code": "@keyframes elastic-scale {\n  0% { opacity: 0; transform: scale(0); }\n  40% { opacity: 1; transform: scale(1.16); }\n  60% { transform: scale(0.92); }\n  75% { transform: scale(1.05); }\n  90% { transform: scale(0.98); }\n  100% { opacity: 1; transform: scale(1); }\n}\n\n@utility animate-elastic-scale {\n  --sk-duration: 800ms;\n  --sk-delay: 0ms;\n  --sk-ease: cubic-bezier(0.34, 1.56, 0.64, 1);\n  will-change: transform, opacity;\n  animation: elastic-scale var(--sk-duration) var(--sk-ease) var(--sk-delay) both;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .elastic-scale {\n    animation: none;\n    opacity: 1;\n    transform: none;\n  }\n}"
    },
    {
      "label": "Framer Motion",
      "language": "tsx",
      "code": "import { motion } from \"framer-motion\";\n\n<motion.div\n  initial={{ opacity: 0, scale: 0 }}\n  animate={{ opacity: 1, scale: 1 }}\n  transition={{\n    type: \"spring\",\n    stiffness: 260,\n    damping: 12,\n    mass: 0.8,\n  }}\n>\n  Content\n</motion.div>"
    }
  ]
}