Transitions

Transition utilities create smooth, polished state changes without writing custom CSS. They are useful for hover effects, buttons, cards, links, image overlays, dropdown surfaces, shadows, opacity changes, and transform-based interactions.

FrontAlign provides utilities for controlling transition properties, durations, delays, easing functions, and animation disabling.

All transition utilities are pure CSS and do not require the FrontAlign runtime.

Quick reference

Group	Classes	Effect	Common use
Default transition	`transition`	Uses the framework default transition settings.	General interactive elements.
All properties	`transition-all`	Animates all changing properties.	Quick prototypes and combined hover effects.
Color changes	`transition-colors`	Animates color, background, border, and related color changes.	Buttons, links, alerts, nav items.
Opacity changes	`transition-opacity`	Animates opacity changes.	Overlays, loading states, fade effects.
Shadow changes	`transition-shadow`	Animates elevation changes.	Cards, dropdowns, modals, floating surfaces.
Transform changes	`transition-transform`	Animates scale, translate, and rotate utilities.	Hover lifts, pressed states, motion effects.
Disable motion	`animation-none`, `transition-none`	Removes animation or transition behavior.	Instant state updates and disabled motion states.

Usage

Use transition-colors with a duration utility for smooth button and link states.

<button
  class="transition-colors duration-300 hover:bg-primary"
>
  Hover Me
</button>

Disable animation

Use animation-none when an element should not run CSS animations.

<div class="animation-none">
  Content
</div>

Disable transitions

Use transition-none when a component should update instantly without transition timing.

<div class="transition-none">
  Content
</div>

Transition colors

Use transition-colors for buttons, links, alerts, navigation items, and interactive components.

<a
  href="#"
  class="transition-colors hover:text-primary"
>
  Read More
</a>

<button
  class="transition-colors hover:bg-primary"
>
  Button
</button>

Transition opacity

Use transition-opacity for image overlays, loading states, fade effects, and interactive cards.

<div
  class="transition-opacity hover:opacity-75"
>
  Content
</div>

Transition shadow

Use transition-shadow when elevation should change smoothly on hover or focus.

<div
  class="shadow transition-shadow hover:shadow-large"
>
  Card
</div>

Transition transform

Use transition-transform with FrontAlign transform utilities for scale, translate, and rotate effects.

<div
  class="transform transition-transform hover:scale-105"
>
  Interactive Card
</div>

Transition all

Use transition-all carefully because it animates every changing property.

<div
  class="transition-all hover:shadow-large hover:scale-105"
>
  Premium Card
</div>

Duration utilities

Duration utilities control animation speed.

Class	Duration	Recommended use
`duration-75`	`75ms`	Ultra-fast micro interactions.
`duration-100`	`100ms`	Very fast interface feedback.
`duration-150`	`150ms`	Links and quick button states.
`duration-200`	`200ms`	Buttons and compact controls.
`duration-300`	`300ms`	Cards, shadows, and standard UI motion.
`duration-500`	`500ms`	Images, overlays, and smoother surfaces.
`duration-700`	`700ms`	Large UI motion and slower reveals.
`duration-1000`	`1000ms`	Large decorative transitions.

Fast interaction

<button
  class="transition-colors duration-150"
>
  Button
</button>

Smooth card

<div
  class="transition-all duration-500"
>
  Card
</div>

Delay utilities

Delay utilities control when the transition starts.

Class	Delay	Common use
`delay-75`	`75ms`	Subtle staged feedback.
`delay-100`	`100ms`	Small staggered interactions.
`delay-150`	`150ms`	Menus and secondary UI states.
`delay-200`	`200ms`	Layered card or content reveals.
`delay-300`	`300ms`	Intentional delayed animations.
`delay-500`	`500ms`	Slower reveal sequences.
`delay-700`	`700ms`	Large staged motion.
`delay-1000`	`1000ms`	Decorative or presentation-style delays.

<div
  class="transition-all delay-300"
>
  Delayed Animation
</div>

Easing functions

Easing utilities control the feel and motion behavior of transitions.

Class	Motion	Common use
`ease-linear`	Constant speed.	Progress-like movement and mechanical motion.
`ease-in`	Starts slowly.	Elements leaving the screen.
`ease-out`	Ends slowly.	Most interface hover and entrance motion.
`ease-in-out`	Smooth start and end.	Balanced state changes.
`ease-spring`	Spring-like motion.	Playful cards, badges, and interactive surfaces.

Spring interaction

<div
  class="transition-transform ease-spring hover:scale-105"
>
  Interactive Card
</div>

Real-world examples

Premium card

<div
  class="transform transition-all duration-300 ease-out hover:shadow-large hover:scale-105 hover:translate-y-2"
>
  Feature Card
</div>

Button interaction

<button
  class="transition-colors duration-200 hover:bg-primary hover:text-white"
>
  Get Started
</button>

Interactive image

<img
  src="/project.jpg"
  class="transition-all duration-500 hover:scale-105 hover:brightness-110"
  alt="Project"
/>

Floating navigation

<header
  class="transition-shadow duration-300 hover:shadow-medium"
>
  Navigation
</header>

Fade effect

<div
  class="transition-opacity duration-500 hover:opacity-75"
>
  Content
</div>

Combining utilities

Transform + transition

<div
  class="transform transition-transform hover:translate-y-2 hover:scale-105"
>
  Card
</div>

Shadow + transition

<div
  class="shadow transition-shadow hover:shadow-large"
>
  Surface
</div>

Colors + transition

<a
  href="#"
  class="transition-colors hover:text-primary"
>
  Link
</a>

Choosing the right duration

Use case	Recommended duration	Reason
Buttons	`150ms - 200ms`	Feels instant but still polished.
Links	`150ms`	Keeps text interactions quick.
Cards	`300ms`	Gives elevation and movement enough time to feel premium.
Images	`300ms - 500ms`	Creates smoother visual movement.
Modals	`300ms - 500ms`	Works well for larger surface transitions.
Large UI motions	`500ms - 1000ms`	Prevents large movement from feeling abrupt.

Best practices

Prefer targeted transitions over transition-all.
Use transition-colors for buttons and links.
Use transition-transform for motion effects.
Use transition-shadow for elevation changes.
Keep hover interactions between 150ms and 300ms.
Use ease-out for most interface animations.
Reserve ease-spring for playful interactions.
Combine transitions with FrontAlign hover and transform utilities for premium UI effects.