cards-containers

该技能用于为卡片、面板、磁贴或容器元素设计动画，目标是营造深度感与交互反馈。它把迪士尼十二动画原则映射到卡片场景：挤压拉伸（拖拽起止时2-3%缩放）、预备动作（展开详情前先缩至0.98约50ms）、舞台调度（被操作卡片通过z-index与阴影抬升，背景卡片变暗或模糊）、关键姿态（定义静止、悬停、选中、展开等状态）、跟随与重叠（卡片内容滞后20-40ms）、缓入缓出（抬升用ease-out，落定用ease-in-out，避免线性）、弧线（拖拽重排走曲线并轻微旋转）、次要动作（阴影扩大模糊、图片微缩放、边框发光）、时间控制（悬停抬升200-250ms、选中150ms、展开300-400ms、重排250-350ms、卡片间错开50-75ms）、夸张（悬停阴影2-3倍、选中抬升8-12px）、扎实造型（保持圆角比例、统一光源、维持宽高比）与吸引力（圆角、柔和阴影、平滑过渡）。用法上提供CSS实现思路：对.card设置transform与box-shadow过渡，悬停时translateY(-8px) scale(1.02)并加深阴影，.card-content使用略长过渡形成滞后；关键属性包括transform、box-shadow、z-index、filter与opacity。适用场景为卡片列表、面板、磁贴的悬停、选中、展开与拖拽重排交互。限制方面，资料未提供具体框架适配、浏览器兼容性、性能数据或无障碍处理说明。