forms-inputs

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Form & Input Animation Principles

表单与输入框动画原则

Apply Disney's 12 principles to forms for clear feedback and delightful interactions.

将迪士尼的12条动画原则应用于表单，以实现清晰的反馈效果与愉悦的交互体验。

Principles Applied to Form Elements

应用于表单元素的原则

1. Squash & Stretch

1. 挤压与拉伸（Squash & Stretch）

Input fields can subtly expand on focus (1-2px height). Submit button compresses on click. Checkboxes bounce on toggle.

输入框在获得焦点时可轻微扩大（高度增加1-2px）。提交按钮在点击时收缩。复选框在切换时产生弹跳效果。

2. Anticipation

2. 预备动作（Anticipation）

Label floats up before user types. Focus ring appears before content entry. Prepares user for input action.

在用户输入前，标签先向上浮动。在内容输入前，先显示焦点环。提前为用户的输入操作做好准备。

3. Staging

3. 场景呈现（Staging）

Focused input should be visually prominent: border color, shadow, label position. Other fields can slightly dim. Guide attention.

获得焦点的输入框应在视觉上突出：通过边框颜色、阴影、标签位置来体现。其他字段可略微变暗，以此引导用户注意力。

4. Straight Ahead & Pose to Pose

4. 逐帧与关键帧动画（Straight Ahead & Pose to Pose）

Define input states: default, focus, filled, valid, invalid, disabled. Clear poses for each state with smooth transitions.

定义输入框的状态：默认、聚焦、已填充、有效、无效、禁用。为每个状态设置清晰的样式，并实现平滑过渡。

5. Follow Through & Overlapping Action

5. 跟随与重叠动作（Follow Through & Overlapping Action）

Floating label settles after reaching final position. Validation icon can bounce slightly. Character counter updates with subtle motion.

浮动标签到达最终位置后会稳定下来。验证图标可产生轻微弹跳效果。字符计数器更新时伴随细微动画。

6. Ease In & Ease Out

6. 缓入缓出（Ease In & Ease Out）

Focus transitions:

ease-out

. Validation feedback:

ease-in-out

. Label float:

cubic-bezier(0.4, 0, 0.2, 1)

聚焦过渡：

ease-out

。验证反馈：

ease-in-out

。标签浮动：

cubic-bezier(0.4, 0, 0.2, 1)

。

7. Arcs

7. 弧线运动（Arcs）

Floating labels should arc slightly during upward movement, not straight line. Adds organic feel to mechanical action.

浮动标签向上移动时应沿轻微弧线运动，而非直线。为机械操作增添自然感。

8. Secondary Action

8. 次要动作（Secondary Action）

While border highlights (primary), label floats (secondary), helper text appears (tertiary). Coordinate without overwhelming.

边框高亮（主要动作）的同时，标签浮动（次要动作），辅助文本显示（第三动作）。协调动作，避免过度干扰。

9. Timing

9. 时间节奏（Timing）

Focus border: 100-150ms
Label float: 150-200ms
Validation feedback: 200ms
Error shake: 300ms (3-4 cycles)
Success check: 250ms
Checkbox toggle: 150ms

聚焦边框：100-150ms
标签浮动：150-200ms
验证反馈：200ms
错误抖动：300ms（3-4次循环）
成功勾选：250ms
复选框切换：150ms

10. Exaggeration

10. 夸张（Exaggeration）

Error states can shake (4-6px, 2-3 times). Success states can pulse green briefly. Invalid inputs deserve clear, noticeable feedback.

错误状态可产生抖动效果（4-6px，2-3次）。成功状态可短暂呈现绿色脉动效果。无效输入需提供清晰、醒目的反馈。

11. Solid Drawing

11. 扎实绘制（Solid Drawing）

Maintain border-radius consistency. Label typography should stay crisp during transform. Icons should scale proportionally.

保持边框圆角的一致性。标签文字在变形过程中应保持清晰。图标应按比例缩放。

12. Appeal

12. 吸引力（Appeal）

Responsive forms feel modern. Micro-animations guide users. Satisfying feedback reduces form abandonment. Worth the investment.

响应式表单更具现代感。微动画可引导用户操作。令人满意的反馈能降低表单放弃率，值得投入精力实现。

CSS Implementation

CSS 实现

css

.input-field {
  transition: border-color 150ms ease-out,
              box-shadow 150ms ease-out;
}

.floating-label {
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
              font-size 200ms ease-out,
              color 150ms ease-out;
}

.input-field:focus + .floating-label {
  transform: translateY(-24px) scale(0.85);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

css

.input-field {
  transition: border-color 150ms ease-out,
              box-shadow 150ms ease-out;
}

.floating-label {
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
              font-size 200ms ease-out,
              color 150ms ease-out;
}

.input-field:focus + .floating-label {
  transform: translateY(-24px) scale(0.85);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

Key Properties

核心属性

```
transform
```
: translateY (label), translateX (shake)
```
border-color
```
: state indication
```
box-shadow
```
: focus rings
```
color
```
: label/text states
```
opacity
```
: helper text, icons

```
transform
```
: translateY（标签）, translateX（抖动）
```
border-color
```
: 状态标识
```
box-shadow
```
: 焦点环
```
color
```
: 标签/文本状态
```
opacity
```
: 辅助文本、图标