形态过渡

{
  "slug": "morph-transition",
  "name": "形态过渡",
  "nameEn": "Morph Transition",
  "description": "元素在两种形态之间平滑过渡，包括尺寸、圆角、颜色等属性的同步变化。",
  "descriptionEn": "Element smoothly morphs between two states, transitioning size, border-radius, and color simultaneously.",
  "category": "transition",
  "tags": [
    "morph",
    "transition",
    "shape",
    "state"
  ],
  "trigger": "continuous",
  "difficulty": "advanced",
  "duration": "600ms",
  "easing": "cubic-bezier(0.4, 0, 0.2, 1)",
  "cssProperties": [
    "border-radius",
    "width",
    "height",
    "background-color"
  ],
  "isGPUAccelerated": false,
  "previewBg": "gradient",
  "keywords": [
    "morph",
    "shape shift",
    "state transition",
    "layout animation",
    "FLIP"
  ],
  "useCases": [
    "Button state transitions",
    "Card expand/collapse morph",
    "Navigation indicator morph",
    "Toggle switch animation"
  ],
  "relatedAnimations": [
    "crossfade",
    "morph-shape",
    "blur-in"
  ],
  "recommendedStyles": [
    "glassmorphism",
    "soft-ui",
    "neo-brutalist"
  ],
  "codeSnippets": [
    {
      "label": "CSS Keyframes",
      "language": "css",
      "code": "@keyframes morph-transition {\n  0%, 100% {\n    width: 48px;\n    height: 48px;\n    border-radius: 50%;\n    background-color: #6366f1;\n  }\n  50% {\n    width: 120px;\n    height: 40px;\n    border-radius: 12px;\n    background-color: #ec4899;\n  }\n}\n\n.morph-transition {\n  --sk-duration: 2.4s;\n  --sk-ease: cubic-bezier(0.4, 0, 0.2, 1);\n  animation: morph-transition var(--sk-duration) var(--sk-ease) infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .morph-transition {\n    animation: none;\n  }\n}"
    },
    {
      "label": "Tailwind CSS",
      "language": "css",
      "code": "@keyframes morph-transition {\n  0%, 100% {\n    width: 48px;\n    height: 48px;\n    border-radius: 50%;\n    background-color: #6366f1;\n  }\n  50% {\n    width: 120px;\n    height: 40px;\n    border-radius: 12px;\n    background-color: #ec4899;\n  }\n}\n\n@utility animate-morph-transition {\n  --sk-duration: 2.4s;\n  --sk-ease: cubic-bezier(0.4, 0, 0.2, 1);\n  animation: morph-transition var(--sk-duration) var(--sk-ease) infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .morph-transition {\n    animation: none;\n  }\n}"
    },
    {
      "label": "Framer Motion",
      "language": "tsx",
      "code": "import { motion } from \"framer-motion\";\n\n// Use layout animations for automatic morph transitions\n<motion.div\n  layout\n  animate={isExpanded ? {\n    width: 120,\n    height: 40,\n    borderRadius: 12,\n    backgroundColor: \"#ec4899\",\n  } : {\n    width: 48,\n    height: 48,\n    borderRadius: 24,\n    backgroundColor: \"#6366f1\",\n  }}\n  transition={{ duration: 0.6, ease: [0.4, 0, 0.2, 1] }}\n/>"
    }
  ]
}