Skip to main content
iotools.cloudiotools.cloud

CSS Transition Generator

API reference

Generate a CSS transition — property, duration, delay and easing — with a hoverable live preview, then copy the shorthand, a full hover rule and the HTML. Includes a prefers-reduced-motion block.

Input

The preview applies a matching hover change for whichever property you pick.

Output

Your transition preview will appear here.

transition declaration
CSS
HTML
Was this helpful?

More ways to use this tool

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-transition-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "property": "background-color",
    "duration": "300",
    "delay": "0",
    "timing": "ease",
    "baseColor": "#3b82f6",
    "hoverColor": "#8b5cf6",
    "reducedMotion": "true"
  }'

Swap in your own key from your account. The tool's fields are the body — no wrapper.

Ask an AI agent

Use the IOTools `css-transition-generator` tool (CSS Transition Generator) on this input:

YOUR_INPUT_HERE

Paste this at any agent connected to the IOTools MCP server, then add your input.

Embed widget

<iframe
  src="https://iotools.cloud/embed/css-transition-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="CSS Transition Generator — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Drop this into your own page — free, no key required, just a link back.

Cost per API/MCP callFrom 5 credits
Need more credits?View pricing

Also available with

IntegrationsBrowser extensionVS Code extension

Guides

A CSS transition makes a property change gradually instead of snapping. This generator lets you choose what animates, how long it takes, when it starts and how it accelerates, then shows the result on a box you can hover, so you can tune it by feel before copying the CSS.

How to use it

  1. Choose the property to transition. all animates every changed property; naming one (such as transform or background-color) is faster and more predictable.
  2. Set the duration and delay in milliseconds. 150-300 ms feels responsive for hover effects; longer values suit large movements.
  3. Pick the timing function. ease-out suits things entering, ease-in things leaving, linear suits colour fades and progress. Choose Custom cubic-bezier() to set the four control points yourself, or steps() for a stepped effect.
  4. Adjust the hover state (colours, and for transform the scale, move or rotate amount) and hover the preview.
  5. Copy the one-line transition declaration, the full CSS rule or the HTML.

Good to know

  • The transition is written on the resting state, so it plays both when the pointer enters and when it leaves. Put a different transition on :hover if you want asymmetrical timing.
  • Only properties with a computable midpoint animate: colours, lengths, opacity, transforms, shadows and filters. display and height: auto do not.
  • Prefer transform and opacity: browsers can animate them on the GPU without re-laying out the page.
  • The generated CSS includes a prefers-reduced-motion block by default so people who ask for less motion get none. Untick it if you handle that elsewhere.
  • For a visual curve editor, try the CSS Cubic Bezier Generator.
css transitionhover effecteasingcubic-bezieranimationdurationdelaytransition-timing-functionfrontend

Love the tools? Lose the ads.

One payment clears every ad from your account, for good. No subscription, no tracking.

Remove ads