SyntaxShelf

Transition

2 snippets across 2 stacks - HTML & CSS, React

HCHTML & CSS

Transitions

HC · Animations & Transitions
Syntax
transition: property duration timing-function delay;
transition: all 0.3s ease;
Example
.button {
  background: #2563eb;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.button:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}

/* Transition specific properties for performance */
.card {
  transition: box-shadow 0.2s ease, transform 0.3s ease;
}

Note Prefer transitioning specific properties rather than using 'all' since transitioning everything can cause unexpected side effects and reduced performance. Stick to transform and opacity for the smoothest animations (they are GPU-accelerated).

REReact

useTransition

RE · Additional Hooks
Syntax
const [isPending, startTransition] = useTransition();
Example
import { useState, useTransition } from 'react';

function TabContainer() {
  const [tab, setTab] = useState('home');
  const [isPending, startTransition] = useTransition();

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }

  return (
    <div>
      <nav>
        <button onClick={() => selectTab('home')}>Home</button>
        <button onClick={() => selectTab('analytics')}>Analytics</button>
        <button onClick={() => selectTab('settings')}>Settings</button>
      </nav>
      {isPending && <p>Loading...</p>}
      <TabPanel activeTab={tab} />
    </div>
  );
}

Note startTransition marks state updates as non-urgent, allowing urgent updates (like typing) to interrupt them. The isPending flag lets you show loading indicators. Unlike useDeferredValue, useTransition wraps the state update itself.

Frequently asked questions

How does HTML & CSS handle transition?
This task is covered in 2 stacks on this page: HTML & CSS, React. The "Transitions" snippet in HTML & CSS uses `transition: property duration timing-function delay;`.
Which code does the HTML & CSS example use?
The "Transitions" snippet uses `transition: property duration timing-function delay;`, from the Animations & Transitions section of the HTML & CSS cheat sheet.
Which stacks cover "transition" on this page?
HTML & CSS, React. Together they hold 2 copy-ready snippets for this task.
Is there anything to watch out for?
Yes. For "Transitions": Prefer transitioning specific properties rather than using 'all' since transitioning everything can cause unexpected side effects and reduced performance. Stick to transform and opacity for the smoothest animations (they are GPU-accelerated).

Browse all tasks by intent