Rombo
Base Animations

Opacity

Animate the opacity of an element

Basic Usage

<div class="motion-opacity-in-0">
  Fade in
</div>
Fade in

Available Values

These are the theme default values. You can customize the theme to add your own values to the motionOpacity property or use arbitrary values.

ClassValue
motion-opacity-in-00.001
motion-opacity-in-50.05
motion-opacity-in-100.1
motion-opacity-in-150.15
motion-opacity-in-200.2
motion-opacity-in-250.25
motion-opacity-in-300.3
motion-opacity-in-350.35
motion-opacity-in-400.4
motion-opacity-in-450.45
motion-opacity-in-500.5
motion-opacity-in-550.55
motion-opacity-in-600.6
motion-opacity-in-650.65
motion-opacity-in-700.7
motion-opacity-in-750.75
motion-opacity-in-800.8
motion-opacity-in-850.85
motion-opacity-in-900.9
motion-opacity-in-950.95
motion-opacity-in-1001
motion-opacity-in0
motion-opacity-in-[50%]Arbitrary value

Loop Animations

<div class="motion-opacity-loop-50">
  Loop opacity
</div>
Loop opacity

Exit Animations

<div class="motion-opacity-out-0">
  Fade out
</div>
Fade out

Combining with Other Animations

<div class="motion-opacity-in-0 motion-translate-y-in-100">
  Fade in while sliding up
</div>
Fade in while sliding up

Combining with Modifiers

<div class="motion-opacity-in-0 motion-duration-[4s]">
  Fade in with duration
</div>
Fade in with duration

Previous

Translation

Next

Rotation

On this page

✨ Rombo for Chrome

Design animations visually in your browser.

Export directly to Rombo for Tailwind, CSS, or Framer Motion.

Install