hover-interactions

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Hover Interaction Animations

悬停交互动画

Apply Disney's 12 principles to mouse hover states.

将迪士尼的12项动画原则应用于鼠标悬停状态。

Principle Application

原则应用

Squash & Stretch: Cards can subtly scale (1.02-1.05) on hover, creating "lift" effect.

Anticipation: Hover IS anticipation for click. The hover state previews the interaction.

Staging: Hover effects should highlight the interactive element, not distract from it.

Straight Ahead vs Pose-to-Pose: Define rest and hover poses precisely. Transition smoothly between them.

Follow Through & Overlapping: Child elements animate after parent. Card lifts, then shadow expands.

Slow In/Slow Out: Hover-in: ease-out (fast response). Hover-out: ease-in-out (graceful return).

Arcs: Underlines can draw from center outward. Highlights sweep in curved paths.

Secondary Action: Combine multiple subtle effects. Scale + shadow + color shift together.

Timing:

Hover response: 150-200ms (must feel responsive)
Hover exit: 200-300ms (can be slightly slower)
Never exceed 300ms for hover-in

Exaggeration: Subtle - hover is preview, not performance. Scale max 1.05, shadow max +8px.

Solid Drawing: Hover states must feel like the same element elevated, not a replacement.

Appeal: Hover should invite clicking. Create anticipation without demanding action.

Squash & Stretch（挤压与拉伸）：卡片在悬停时可轻微缩放（1.02-1.05倍），营造“抬起”效果。

Anticipation（预备动作）：悬停本身就是点击的预备状态，悬停效果可预览交互动作。

Staging（舞台化）：悬停效果应突出可交互元素，而非分散用户注意力。

Straight Ahead vs Pose-to-Pose（连续绘制与关键帧绘制）：精准定义元素的静止状态与悬停状态，实现两者间的平滑过渡。

Follow Through & Overlapping（跟随动作与重叠动作）：子元素在父元素之后动画。例如卡片先抬起，再展开阴影。

Slow In/Slow Out（缓入缓出）：悬停触发时使用ease-out（快速响应），悬停离开时使用ease-in-out（优雅恢复）。

Arcs（弧线运动）：下划线可从中心向外延伸绘制，高亮效果可沿弧形路径扫过。

Secondary Action（次要动作）：组合多种细微效果，例如同时应用缩放、阴影与颜色变化。

Timing（时序）:

悬停响应：150-200ms（必须让用户感觉响应迅速）
悬停退出：200-300ms（可稍慢一些）
悬停触发的动画时长绝不能超过300ms

Exaggeration（夸张）：适度即可——悬停是预览而非表演。缩放最大1.05倍，阴影最大增加8px。

Solid Drawing（扎实绘制）：悬停状态应让元素看起来是被抬高，而非被替换。

Appeal（吸引力）：悬停效果应吸引用户点击，营造期待感但不强制用户操作。

Timing Recommendations

时间建议

Hover Effect	Hover-In	Hover-Out	Easing
Color Change	150ms	200ms	ease-out / ease-in-out
Scale/Lift	200ms	250ms	ease-out / ease-in-out
Shadow	200ms	250ms	ease-out / ease-in-out
Underline Draw	200ms	200ms	ease-out
Image Zoom	300ms	400ms	ease-out
Icon Shift	150ms	200ms	ease-out

悬停效果	触发时长	退出时长	缓动函数
颜色变化	150ms	200ms	ease-out / ease-in-out
缩放/抬起	200ms	250ms	ease-out / ease-in-out
阴影变化	200ms	250ms	ease-out / ease-in-out
下划线绘制	200ms	200ms	ease-out
图片缩放	300ms	400ms	ease-out
图标位移	150ms	200ms	ease-out

Implementation Patterns

实现模式

css

/* Card lift with shadow */
.card {
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}

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

/* Slower return */
.card:not(:hover) {
  transition: transform 250ms ease-in-out, box-shadow 250ms ease-in-out;
}

/* Underline draw from center */
.link {
  position: relative;
}

.link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 200ms ease-out, left 200ms ease-out;
}

.link:hover::after {
  width: 100%;
  left: 0;
}

css

/* Card lift with shadow */
.card {
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}

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

/* Slower return */
.card:not(:hover) {
  transition: transform 250ms ease-in-out, box-shadow 250ms ease-in-out;
}

/* Underline draw from center */
.link {
  position: relative;
}

.link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 200ms ease-out, left 200ms ease-out;
}

.link:hover::after {
  width: 100%;
  left: 0;
}

Icon Animation Pattern

图标动画模式

css

.button-icon {
  transition: transform 150ms ease-out;
}

.button:hover .button-icon {
  transform: translateX(4px);
}

/* Arrow grows */
.arrow-icon {
  transition: transform 150ms ease-out;
}

.link:hover .arrow-icon {
  transform: translateX(4px) scale(1.1);
}

css

.button-icon {
  transition: transform 150ms ease-out;
}

.button:hover .button-icon {
  transform: translateX(4px);
}

/* Arrow grows */
.arrow-icon {
  transition: transform 150ms ease-out;
}

.link:hover .arrow-icon {
  transform: translateX(4px) scale(1.1);
}

Key Rules

关键规则

Touch devices don't have hover - ensure functionality without it
Hover-in must be under 200ms to feel responsive
Don't move elements enough to cause mis-clicks
Test with
```
@media (hover: hover)
```
to scope to pointer devices
Combine max 3 properties to avoid overwhelming

css

@media (hover: hover) {
  .card:hover { /* hover effects */ }
}

触控设备无悬停功能——确保无悬停时功能仍正常
悬停触发动画时长必须低于200ms，以保证响应感
元素位移幅度不可过大，避免导致误点击
使用
```
@media (hover: hover)
```
将效果限定在支持指针的设备上
最多组合3种属性，避免效果过于繁杂

css

@media (hover: hover) {
  .card:hover { /* hover effects */ }
}