Skip to main content

Transition Utilities

NuvoUI provides a set of transition utilities that allow you to easily add movement and animation to your interface components. These utilities make it simple to create smooth state changes and interactive effects.

Configuration​

The transition system is built on configurable variables and maps:

Parent Selector​

All transition utilities are scoped under the VAR.$parent-selector which can be configured to change the global selector context:

Utility Class Generation​

Transition utility classes are only generated if VAR.$generate-utility-classes is set to true:

Timing Functions​

The system uses a set of predefined timing functions:

Durations​

Duration values define how long transitions take:

Delays​

Delay values control when transitions start:

Breakpoints​

Responsive variants are generated based on the breakpoints defined in VAR.$breakpoints:

Basic Usage​

Add the base .transition class to enable transitions for all properties:

Transition Properties​

Control which CSS properties will transition:

Transition Durations​

Control how long transitions take:

Timing Functions​

Control the acceleration curve of transitions:

Transition Delays​

Add a delay before transitions start:

Combining Transition Properties​

Combine multiple transition properties for complete control:

Responsive Transitions​

Apply different transition behaviors at different breakpoints:

Common UI Patterns​

Button Hover Effect​

Card Elevation on Hover​

Hover Cards​

Fade-in Content​

Scale Transforms​

Accordion Expansion​

Loading and Spinner Animations​

Transition Utilities Reference Table​

Transition Property Classes​

ClassCSS PropertyDescription
.transitiontransition-property: allTransitions all properties
.transition-nonetransition-property: noneDisables transitions
.transition-colorstransition-property: color, background-color, ...Transitions only color properties
.transition-opacitytransition-property: opacityTransitions only opacity
.transition-shadowtransition-property: box-shadowTransitions only shadow
.transition-transformtransition-property: transformTransitions only transform

Duration Classes​

ClassCSS PropertyDescription
.duration-0transition-duration: 0msInstant transition (no delay)
.duration-75transition-duration: 75msVery fast transition
.duration-100transition-duration: 100msFast transition
.duration-150transition-duration: 150msQuick transition
.duration-200transition-duration: 200msModerate transition
.duration-300transition-duration: 300msStandard transition
.duration-500transition-duration: 500msSlow transition
.duration-700transition-duration: 700msVery slow transition
.duration-1000transition-duration: 1000msExtra slow transition

Timing Function Classes​

ClassCSS PropertyDescription
.ease-lineartransition-timing-function: linearConstant speed transition
.ease-intransition-timing-function: cubic-bezier(0.4, 0, 1, 1)Starts slow, ends fast
.ease-outtransition-timing-function: cubic-bezier(0, 0, 0.2, 1)Starts fast, ends slow
.ease-in-outtransition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)Starts and ends slow

Delay Classes​

ClassCSS PropertyDescription
.delay-0transition-delay: 0msNo delay
.delay-75transition-delay: 75msVery short delay
.delay-100transition-delay: 100msShort delay
.delay-150transition-delay: 150msBrief delay
.delay-200transition-delay: 200msModerate delay
.delay-300transition-delay: 300msStandard delay
.delay-500transition-delay: 500msLong delay
.delay-700transition-delay: 700msVery long delay
.delay-1000transition-delay: 1000msExtra long delay

Responsive Classes​

Add @{breakpoint} suffix to any transition class to apply it at a specific breakpoint:

  • .transition@md
  • .transition-colors@lg
  • .duration-300@sm
  • .ease-in-out@xl
  • .delay-100@md

SCSS Mixins​

NuvoUI provides a comprehensive set of transition mixins for use in your SCSS:

Property Mixins​

MixinDescriptionParameters
@include transition-noneDisables transitionsNone
@include transitionTransitions all propertiesNone
@include transition-colorsTransitions only color propertiesNone
@include transition-opacityTransitions only opacityNone
@include transition-shadowTransitions only shadowNone
@include transition-transformTransitions only transformNone

Duration Mixin​

MixinDescriptionParameters
@include duration($time)Sets transition duration$time: Time value (e.g., 300ms)

Timing Function Mixins​

MixinDescriptionParameters
@include ease-linearSets linear timing functionNone
@include ease-inSets ease-in timing functionNone
@include ease-outSets ease-out timing functionNone
@include ease-in-outSets ease-in-out timing functionNone

Delay Mixin​

MixinDescriptionParameters
@include delay($time)Sets transition delay$time: Time value (e.g., 200ms)

Example SCSS Usage​

Best Practices​

When to Use Transitions​

  • Use transitions to provide visual feedback for user interactions
  • Apply transitions for non-disruptive UI changes like hover states, expansions, and color shifts
  • Keep transitions subtle and purposeful, avoiding excessive animation
  • For content-heavy sites, consider using minimal or no transitions to prioritize performance

Performance Considerations​

  • Transition only the properties you need to change (use .transition-colors instead of .transition)
  • Avoid transitioning expensive properties like width and height when possible
  • For smoother animations, prefer transitioning transform and opacity
  • Keep durations short for common interactions (75ms-300ms)
  • Test transitions on mobile devices to ensure they feel responsive

Accessibility​

  • Respect user preferences by checking for prefers-reduced-motion
  • Avoid transitions that could trigger vestibular disorders
  • Ensure interactive elements are clearly distinguishable without hover effects
  • Don't rely solely on transitions to communicate state changes

Theme Integration​

When using with NuvoUI theme system, transitions can enhance