弹性入场

{
  "slug": "bounce-in",
  "name": "弹性入场",
  "nameEn": "Bounce In",
  "description": "元素以弹性缩放方式入场，从小尺寸弹跳过冲后稳定在原始大小，充满活力感。",
  "descriptionEn": "Element enters with an elastic bounce scale effect, overshooting slightly before settling at its original size.",
  "category": "entrance",
  "tags": [
    "bounce",
    "scale",
    "entrance",
    "elastic",
    "mount"
  ],
  "trigger": "on-mount",
  "difficulty": "beginner",
  "duration": "600ms",
  "easing": "cubic-bezier(0.34, 1.56, 0.64, 1)",
  "cssProperties": [
    "opacity",
    "transform"
  ],
  "isGPUAccelerated": true,
  "previewBg": "light",
  "keywords": [
    "bounce",
    "elastic",
    "spring",
    "entrance",
    "scale",
    "overshoot"
  ],
  "useCases": [
    "Notification badge appearance",
    "Toast message entrance",
    "Icon pop-in effect",
    "Call-to-action button reveal"
  ],
  "relatedAnimations": [
    "scale-in",
    "fade-in-up"
  ],
  "recommendedStyles": [
    "soft-ui",
    "playful-pop",
    "glassmorphism"
  ],
  "codeSnippets": [
    {
      "label": "CSS Keyframes",
      "language": "css",
      "code": "@keyframes bounce-in {\n  0% {\n    opacity: 0;\n    transform: scale(0.3);\n  }\n  50% {\n    opacity: 1;\n    transform: scale(1.08);\n  }\n  70% {\n    transform: scale(0.95);\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n.bounce-in {\n  --sk-duration: 600ms;\n  --sk-delay: 0ms;\n  --sk-ease: cubic-bezier(0.34, 1.56, 0.64, 1);\n  will-change: transform, opacity;\n  animation: bounce-in var(--sk-duration) var(--sk-ease) var(--sk-delay) both;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .bounce-in {\n    animation: none;\n    opacity: 1;\n    transform: none;\n  }\n}"
    },
    {
      "label": "Tailwind CSS",
      "language": "css",
      "code": "/* Add to your global CSS or Tailwind v4 theme */\n@keyframes bounce-in {\n  0% {\n    opacity: 0;\n    transform: scale(0.3);\n  }\n  50% {\n    opacity: 1;\n    transform: scale(1.08);\n  }\n  70% {\n    transform: scale(0.95);\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@utility animate-bounce-in {\n  --sk-duration: 600ms;\n  --sk-delay: 0ms;\n  --sk-ease: cubic-bezier(0.34, 1.56, 0.64, 1);\n  will-change: transform, opacity;\n  animation: bounce-in var(--sk-duration) var(--sk-ease) var(--sk-delay) both;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .bounce-in {\n    animation: none;\n    opacity: 1;\n    transform: none;\n  }\n}"
    },
    {
      "label": "Framer Motion",
      "language": "tsx",
      "code": "import { motion } from \"framer-motion\";\n\n// Tip: respect user's motion preferences\n// import { useReducedMotion } from \"framer-motion\";\n// const reduced = useReducedMotion();\n// Use reduced ? { opacity: 0 } : { opacity: 0, scale: 0.3 } for initial\n\n<motion.div\n  initial={{ opacity: 0, scale: 0.3 }}\n  animate={{ opacity: 1, scale: 1 }}\n  transition={{\n    duration: 0.6,\n    ease: [0.34, 1.56, 0.64, 1],\n    scale: {\n      type: \"spring\",\n      damping: 12,\n      stiffness: 200,\n    },\n  }}\n>\n  Content\n</motion.div>"
    }
  ]
}