Animations

Moraine provides CSS animations through the UnoCSS preset and Tailwind 4 plugin. Built-in keyframes and transform utilities read the duration variables shown below. Set these variables in CSS; UnoCSS theme overrides cover design tokens, not animation controls.

Built-in Animation Utilities#

The following animation utilities are registered by presetMoraine() and moraine/tailwind:

Parametric Transform Utilities#

animate-mo-enter and animate-mo-exit read parametric CSS variables defined by matching utility classes. Combine them to create custom entrance and exit choreographies without writing custom keyframes:

export function AnimatedPopover() {
  return (
    <div class="animate-mo-enter enter-opacity-0 enter-scale-95 enter-translate-y-2">
      Dropdown or popover content
    </div>
  )
}

Animation Durations and Easing#

Moraine defines default durations and easing curves for each animation type:

:root {
  /* Global override for all Moraine CSS animations */
  --mo-anim-duration: 250ms;

  /* Type-specific overrides */
  --mo-anim-duration-enter: 250ms;
  --mo-anim-duration-exit: 150ms;
  --mo-anim-duration-loop: 2s;
  --mo-anim-duration-spin: 1s;

  /* Shared easing override for mo-enter and mo-exit */
  --mo-anim-ease: ease;
}

• --mo-anim-duration overrides every Moraine animation duration when defined.
• If --mo-anim-duration is not set, each animation falls back to its type-specific duration (enter, exit, loop, or spin).
• --mo-anim-ease overrides the easing of animate-mo-enter and animate-mo-exit in its scope. When unset, they read --mo-anim-ease-enter and --mo-anim-ease-exit, respectively, then fall back to the curves below. Set these variables on the animated element or a DOM ancestor; portaled content cannot inherit from a trigger’s container outside the portal.
• Easing curves:
  • enter: cubic-bezier(0.16, 1, 0.3, 1) (snappy ease-out)
  • exit: cubic-bezier(0.7, 0, 0.84, 0) (accelerating ease-in)
  • loop: ease-in-out
  • spin: linear

animate-shimmer uses the loop duration with linear easing.

Disclosure Height Token#

Collapsible and Accordion components calculate their rendered panel dimensions and set --mo-collapsible-content-height on the disclosure container element. The animate-accordion-down and animate-accordion-up keyframes read this variable to animate smoothly between 0 and the exact natural content height.

@keyframes accordion-down {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: var(--mo-collapsible-content-height);
    opacity: 1;
  }
}

Reduced Motion#

To respect user preferences for reduced motion, pair animation utilities with motion-reduce:animate-none or motion-reduce:transition-none:

<div class="animate-mo-enter enter-opacity-0 enter-scale-95 motion-reduce:animate-none">
  Dialog content
</div>