Motion Lexicon
Search/
中文
System
Motion component

Fade in / Fade out

Introduce or remove an element with opacity for low-distraction state changes.

Preview

Live preview

Element appears or disappears by changing opacity.

Preview
Fade in / Fade out
Authoritative vocabulary

Definition and close-term distinctions

English definitions are preserved verbatim from Animation Vocabulary; translations and distinctions help you choose precisely.

Canonical termfade-in-fade-out

Fade in / Fade out

淡入 / 淡出
Authoritative definition

Element appears or disappears by changing opacity.

Chinese translation

元素通过改变不透明度出现或消失。

Browse all 91 terms
Design contract

Decide before this motion ships

Purpose, frequency, trigger, timing, interruptibility, and gesture rules shape the implementation.

Purpose

Communicate appearance, disappearance, or visibility changes with minimal distraction.

Frequency

Suitable for medium- to high-frequency state changes; keep repeated uses around 120–220ms.

Trigger

Trigger from mounting, async completion, filter-result changes, or an explicit visibility state.

Enter / exit

Enter from low opacity to fully visible; finish the exit fade before unmounting.

Interruptibility

When state changes again, continue from the current opacity without resetting to the start.

Gesture and keyboard

No gesture control is required; interactive controls still update accessible state immediately.

Reduced-motion strategy

Keep a brief 80–120ms fade and pair important information with a static contrast change.

Output

Copy into your interface

Current parameters update visual-state CSS, semantic HTML, the required vanilla JS runtime, and an interaction prompt.

Updates with parameters
motion.css
.motion-demo.motion-demo--fade-in-fade-out {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 34rem);
  min-height: 15rem;
  padding: 2rem;
  overflow: hidden;
  color: #18181b;
  background: #fafafa;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  isolation: isolate;
}

.motion-demo.motion-demo--fade-in-fade-out *, .motion-demo.motion-demo--fade-in-fade-out *::before, .motion-demo.motion-demo--fade-in-fade-out *::after {
  box-sizing: border-box;
}

.motion-demo.motion-demo--fade-in-fade-out .motion-surface {
  position: relative;
  display: grid;
  gap: 0.65rem;
  width: min(100%, 18rem);
  padding: 1.25rem;
  background: #ffffff;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 10px 28px rgb(0 0 0 / 7%);
}

.motion-demo.motion-demo--fade-in-fade-out .motion-line {
  display: block;
  width: 100%;
  height: 0.5rem;
  background: #e4e4e7;
  border-radius: 999px;
}

.motion-demo.motion-demo--fade-in-fade-out .motion-line:last-child { width: 62%; }

.motion-demo.motion-demo--fade-in-fade-out .motion-button {
  position: relative;
  min-height: 2.75rem;
  padding: 0.75rem 1.1rem;
  color: white;
  font: inherit;
  font-weight: 700;
  background: #18181b;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.motion-demo.motion-demo--fade-in-fade-out .motion-button:focus-visible { outline: 3px solid rgb(37 99 235 / 32%); outline-offset: 3px; }

.motion-demo.motion-demo--fade-in-fade-out .motion-action-row {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.motion-demo.motion-demo--fade-in-fade-out .motion-replay-scene {
  width: min(100%, 22rem);
  display: grid;
  place-items: center;
}

.motion-demo.motion-demo--fade-in-fade-out .motion-pausable-scene {
  width: min(100%, 22rem);
  display: grid;
  place-items: center;
}

.motion-demo.motion-demo--fade-in-fade-out button.motion-surface {
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.motion-demo.motion-demo--fade-in-fade-out .motion-replay-button,
.motion-demo.motion-demo--fade-in-fade-out .motion-undo-button,
.motion-demo.motion-demo--fade-in-fade-out .motion-dismiss-button,
.motion-demo.motion-demo--fade-in-fade-out .motion-pause-button {
  min-height: 2.75rem;
  padding: 0.65rem 0.9rem;
  color: #18181b;
  font: 650 0.78rem/1 ui-sans-serif, system-ui, sans-serif;
  background: #ffffff;
  border: 1px solid #d4d4d8;
  border-radius: 7px;
  cursor: pointer;
}

.motion-demo.motion-demo--fade-in-fade-out .motion-replay-button:focus-visible,
.motion-demo.motion-demo--fade-in-fade-out .motion-undo-button:focus-visible,
.motion-demo.motion-demo--fade-in-fade-out .motion-dismiss-button:focus-visible,
.motion-demo.motion-demo--fade-in-fade-out .motion-pause-button:focus-visible,
.motion-demo.motion-demo--fade-in-fade-out [data-reorder-item]:focus-visible,
.motion-demo.motion-demo--fade-in-fade-out [data-swipe-target]:focus-visible {
  outline: 3px solid rgb(37 99 235 / 32%);
  outline-offset: 3px;
}

.motion-demo.motion-demo--fade-in-fade-out .motion-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.motion-demo.motion-demo--fade-in-fade-out .motion-ripple-ink {
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
  background: rgb(255 255 255 / 72%);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  opacity: 0;
}

.motion-demo.motion-demo--fade-in-fade-out .motion-state-stack { position: relative; width: min(100%, 18rem); height: 9rem; }
.motion-demo.motion-demo--fade-in-fade-out .motion-state { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; background: #ffffff; border: 1px solid #e4e4e7; border-radius: 8px; }
.motion-demo.motion-demo--fade-in-fade-out .motion-state--to { background: #18181b; color: white; }

.motion-demo.motion-demo--fade-in-fade-out .motion-scroll-track > span { color: #71717a; font: 600 0.72rem/1.2 ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.motion-demo.motion-demo--fade-in-fade-out .motion-orbit-item { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: white; background: #2563eb; border-radius: 50%; }
.motion-demo.motion-demo--fade-in-fade-out .motion-text-stack { position: relative; width: min(100%, 18rem); min-height: 4rem; }
.motion-demo.motion-demo--fade-in-fade-out svg { width: min(100%, 20rem); height: auto; }

.motion-demo.motion-demo--fade-in-fade-out .motion-surface { animation: motion-fade-in-fade-out 220ms cubic-bezier(0.33, 1, 0.68, 1) 0ms both; }
@keyframes motion-fade-in-fade-out { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }

@keyframes motion-fade-in-fade-out-reduced-fade {
  from { opacity: 0.84; }
  to { opacity: 1; }
}

.force-reduced-motion .motion-demo.motion-demo--fade-in-fade-out {
  animation: motion-fade-in-fade-out-reduced-fade 160ms cubic-bezier(0.23, 1, 0.32, 1) both !important;
}

.force-reduced-motion .motion-demo.motion-demo--fade-in-fade-out *,
.force-reduced-motion .motion-demo.motion-demo--fade-in-fade-out *::before,
.force-reduced-motion .motion-demo.motion-demo--fade-in-fade-out *::after {
  animation: none !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-property: opacity, color, background-color, border-color !important;
  transition-duration: 160ms !important;
  transition-delay: 0ms !important;
  scroll-behavior: auto !important;
}

.force-reduced-motion .motion-demo.motion-demo--fade-in-fade-out .motion-button,
.force-reduced-motion .motion-demo.motion-demo--fade-in-fade-out [data-reorder-item],
.force-reduced-motion .motion-demo.motion-demo--fade-in-fade-out [data-swipe-target],
.force-reduced-motion .motion-demo.motion-demo--fade-in-fade-out [data-spring-target] {
  transform: none !important;
}

.force-reduced-motion .motion-demo.motion-demo--fade-in-fade-out .motion-path { stroke-dashoffset: 0 !important; }
.force-reduced-motion .motion-demo.motion-demo--fade-in-fade-out .motion-word--from { opacity: 0 !important; visibility: hidden; }
.force-reduced-motion .motion-demo.motion-demo--fade-in-fade-out .motion-word:not(.motion-word--from) { opacity: 1 !important; filter: none !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .motion-demo.motion-demo--fade-in-fade-out {
    animation: motion-fade-in-fade-out-reduced-fade 160ms cubic-bezier(0.23, 1, 0.32, 1) both !important;
  }

  .motion-demo.motion-demo--fade-in-fade-out *, .motion-demo.motion-demo--fade-in-fade-out *::before, .motion-demo.motion-demo--fade-in-fade-out *::after {
    animation: none !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity, color, background-color, border-color !important;
    transition-duration: 160ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .motion-demo.motion-demo--fade-in-fade-out .motion-button,
  .motion-demo.motion-demo--fade-in-fade-out [data-reorder-item],
  .motion-demo.motion-demo--fade-in-fade-out [data-swipe-target],
  .motion-demo.motion-demo--fade-in-fade-out [data-spring-target] {
    transform: none !important;
  }

  .motion-demo.motion-demo--fade-in-fade-out .motion-path { stroke-dashoffset: 0 !important; }
  .motion-demo.motion-demo--fade-in-fade-out .motion-word--from { opacity: 0 !important; visibility: hidden; }
  .motion-demo.motion-demo--fade-in-fade-out .motion-word:not(.motion-word--from) { opacity: 1 !important; filter: none !important; transform: none !important; }
}
Review notes

Pre-delivery review

  • Ensure the element stops receiving clicks while it fades out.
  • Check that translucent intermediate states remain legible against the background.
Accessibility

Keep information accessible

Reduced motion

Keep a brief 80–120ms fade and pair important information with a static contrast change.

Parameters

Parameter reference

ParameterRange / optionsDefaultPurpose
duration80ms–1200ms220msControls the time required for one motion cycle.
opacity0%–80%0%Adjusts start opacity.
delay0ms–600ms0msControls the wait before motion begins.
easeSoft / Snap / Calm / LinearCalmControls how velocity changes over time.
Related entries
Slide inScale inReveal