右侧滑入

{
  "slug": "slide-in-right",
  "name": "右侧滑入",
  "nameEn": "Slide In Right",
  "description": "元素从右侧滑入视口，适合侧面板、抽屉菜单和分屏布局的入场效果。",
  "descriptionEn": "Element slides in from the right side. Ideal for side panels, drawer menus, and split-screen layouts.",
  "category": "entrance",
  "tags": [
    "slide",
    "entrance",
    "horizontal",
    "panel"
  ],
  "trigger": "on-mount",
  "difficulty": "beginner",
  "duration": "500ms",
  "easing": "cubic-bezier(0.16, 1, 0.3, 1)",
  "cssProperties": [
    "opacity",
    "transform"
  ],
  "isGPUAccelerated": true,
  "previewBg": "light",
  "keywords": [
    "slide",
    "right",
    "entrance",
    "panel",
    "drawer",
    "horizontal"
  ],
  "useCases": [
    "Right-side drawer panel",
    "Split-screen content reveal",
    "Carousel slide transition",
    "Notification panel entrance"
  ],
  "relatedAnimations": [
    "slide-in-left",
    "fade-in-up"
  ],
  "recommendedStyles": [
    "split-screen",
    "sidebar-fixed",
    "magazine-grid"
  ],
  "codeSnippets": [
    {
      "label": "CSS Keyframes",
      "language": "css",
      "code": "@keyframes slide-in-right {\n  from {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n.slide-in-right {\n  --sk-duration: 500ms;\n  --sk-delay: 0ms;\n  --sk-ease: cubic-bezier(0.16, 1, 0.3, 1);\n  will-change: transform, opacity;\n  animation: slide-in-right var(--sk-duration) var(--sk-ease) var(--sk-delay) both;\n}\n\n/* Staggered variant using CSS custom property */\n.slide-in-right-stagger {\n  --sk-duration: 500ms;\n  --sk-delay: 0ms;\n  --sk-ease: cubic-bezier(0.16, 1, 0.3, 1);\n  will-change: transform, opacity;\n  animation: slide-in-right var(--sk-duration) var(--sk-ease) var(--sk-delay) both;\n  animation-delay: calc(var(--stagger-index, 0) * 80ms);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .slide-in-right {\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 slide-in-right {\n  from {\n    opacity: 0;\n    transform: translateX(30px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@utility animate-slide-in-right {\n  --sk-duration: 500ms;\n  --sk-delay: 0ms;\n  --sk-ease: cubic-bezier(0.16, 1, 0.3, 1);\n  will-change: transform, opacity;\n  animation: slide-in-right var(--sk-duration) var(--sk-ease) var(--sk-delay) both;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .slide-in-right {\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, x: 30 } for initial\n\n<motion.div\n  initial={{ opacity: 0, x: 30 }}\n  animate={{ opacity: 1, x: 0 }}\n  transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}\n>\n  Content\n</motion.div>"
    }
  ]
}