Back to Details

cards-containers

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Card & Container Animation Principles

卡片与容器动画原则

Apply Disney's 12 principles to cards and containers for engaging, dimensional interfaces.
将迪士尼的12项动画原则应用于卡片和容器，打造富有吸引力、具备空间感的界面。

Principles Applied to Cards

应用于卡片的原则

1. Squash & Stretch

1. 挤压与拉伸

Cards can subtly compress on drag-start and stretch when released. Keep it minimal: 2-3% scale change maximum.
卡片可在拖拽开始时轻微压缩，释放时拉伸。保持幅度最小：缩放变化最大不超过2-3%。

2. Anticipation

2. 预备动作

Before expanding a card to detail view, briefly scale down (0.98) for 50ms, then expand. Prepares user for the transformation.
在将卡片展开至详情视图前，先短暂缩小至0.98倍（持续50ms），再进行展开。让用户提前感知即将发生的变化。

3. Staging

3. 舞台呈现

The card being interacted with should lift above others via 
z-index
and shadow. Dim or blur background cards to focus attention.
正在交互的卡片应通过
z-index
和阴影效果悬浮于其他卡片之上。将背景卡片调暗或模糊，以聚焦用户注意力。

4. Straight Ahead & Pose to Pose

4. 逐帧动画与关键帧动画

Define clear states: resting, hovered, selected, expanded. Pose-to-pose transitions between these defined keyframes.
定义清晰的状态：静止、悬停、选中、展开。在这些已定义的关键帧之间采用关键帧过渡方式。

5. Follow Through & Overlapping Action

5. 跟随动作与重叠动作

Card content (text, images, icons) should lag slightly behind card movement. Stagger by 20-40ms for natural feel.
卡片内容（文本、图片、图标）的移动应略滞后于卡片本身。设置20-40ms的延迟，营造自然的效果。

6. Ease In & Ease Out

6. 缓入缓出

Card lifts use 
ease-out
, card settles use 
ease-in-out
. Never linear. 
cubic-bezier(0.25, 0.1, 0.25, 1)
for smooth lifts.
卡片抬起时使用
ease-out
，卡片回落时使用
ease-in-out
。绝不要使用线性过渡。使用
cubic-bezier(0.25, 0.1, 0.25, 1)
实现平滑的抬起效果。

7. Arcs

7. 弧线运动

When cards reorder (drag-and-drop), they should follow curved paths, not straight lines. Add slight rotation during movement.
当卡片重新排序（拖拽操作）时，应沿曲线路径移动，而非直线。移动过程中可添加轻微旋转效果。

8. Secondary Action

8. 次要动作

While card lifts (primary), shadow expands and blurs (secondary). Image inside can subtle zoom. Border can glow.
当卡片抬起（主要动作）时，阴影同步扩大并模糊（次要动作）。卡片内的图片可进行轻微缩放，边框可添加发光效果。

9. Timing

9. 时长控制

  • Hover lift: 200-250ms
  • Selection: 150ms
  • Expand to detail: 300-400ms
  • Reorder/shuffle: 250-350ms
  • Stagger between cards: 50-75ms
  • 悬停抬起：200-250ms
  • 选中状态：150ms
  • 展开至详情：300-400ms
  • 重新排序/洗牌：250-350ms
  • 卡片间的延迟：50-75ms

10. Exaggeration

10. 夸张表现

Hover shadows can extend 2-3x normal depth. Selected cards can lift 8-12px. Keep proportional to card size.
悬停时的阴影可扩展至常规深度的2-3倍。选中的卡片可抬起8-12px。保持与卡片尺寸的比例协调。

11. Solid Drawing

11. 扎实绘制

Maintain consistent border-radius ratios when scaling. Shadows should always come from same light source. Preserve aspect ratios.
缩放时保持圆角比例一致。阴影应始终来自同一光源。保留元素的宽高比。

12. Appeal

12. 吸引力

Rounded corners feel approachable, subtle shadows add premium feel. Smooth transitions build trust. Cards should feel like physical objects.
圆角设计更具亲和力，细微的阴影提升质感。平滑的过渡能增强用户信任感。让卡片具备物理实体般的触感。

CSS Implementation

CSS实现

css
.card {
  transition: transform 250ms ease-out,
              box-shadow 250ms ease-out;
}

.card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.card-content {
  transition: transform 280ms ease-out; /* slight lag */
}
css
.card {
  transition: transform 250ms ease-out,
              box-shadow 250ms ease-out;
}

.card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.card-content {
  transition: transform 280ms ease-out; /* slight lag */
}

Key Properties

关键属性

  • transform
    : translateY, scale, rotate
  • box-shadow
    : depth and lift
  • z-index
    : layering
  • filter
    : blur for background
  • opacity
    : focus states
  • transform
    : translateY, scale, rotate
  • box-shadow
    : 深度与悬浮效果
  • z-index
    : 层级控制
  • filter
    : 背景模糊
  • opacity
    : 聚焦状态