Back to Details

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 EffectHover-InHover-OutEasing
Color Change150ms200msease-out / ease-in-out
Scale/Lift200ms250msease-out / ease-in-out
Shadow200ms250msease-out / ease-in-out
Underline Draw200ms200msease-out
Image Zoom300ms400msease-out
Icon Shift150ms200msease-out
悬停效果触发时长退出时长缓动函数
颜色变化150ms200msease-out / ease-in-out
缩放/抬起200ms250msease-out / ease-in-out
阴影变化200ms250msease-out / ease-in-out
下划线绘制200ms200msease-out
图片缩放300ms400msease-out
图标位移150ms200msease-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

关键规则

  1. Touch devices don't have hover - ensure functionality without it
  2. Hover-in must be under 200ms to feel responsive
  3. Don't move elements enough to cause mis-clicks
  4. Test with 
    @media (hover: hover)
    to scope to pointer devices
  5. Combine max 3 properties to avoid overwhelming
css
@media (hover: hover) {
  .card:hover { /* hover effects */ }
}
  1. 触控设备无悬停功能——确保无悬停时功能仍正常
  2. 悬停触发动画时长必须低于200ms，以保证响应感
  3. 元素位移幅度不可过大，避免导致误点击
  4. 使用
    @media (hover: hover)
    将效果限定在支持指针的设备上
  5. 最多组合3种属性，避免效果过于繁杂
css
@media (hover: hover) {
  .card:hover { /* hover effects */ }
}