Transitions

The Six Webcomponents library uses a set of transition tokens to create smooth and consistent animations throughout the interface.

CSS Variable	Value	Description
--six-transition-x-slow	1000ms	Extra slow transitions for major layout changes
--six-transition-slow	500ms	Slow transitions for larger UI elements
--six-transition-medium	250ms	Medium transitions for standard elements
--six-transition-fast	150ms	Fast transitions for small UI elements
--six-transition-x-fast	50ms	Extra fast transitions for micro-interactions

Hover over each box to see the transition speed

X-Slow: 1000ms

Slow: 500ms

Medium: 250ms

Fast: 150ms

X-Fast: 50ms

Usage Example

.button {
  background-color: var(--six-color-web-rock-100);
  transition: background-color var(--six-transition-fast);
}

.button:hover {
  background-color: var(--six-color-web-rock-200);
}

.panel {
  transform: translateY(-100%);
  transition: transform var(--six-transition-medium);
}

.panel.open {
  transform: translateY(0);
}