Skip to Content
StylingTransition Property

Transition Property

Use transition prop to control the transition-property of an element.

Name

Styles

all
colors
none
opacity
transform

#

Documentation

#

Transition colors

Use transition="colors" to transition all color related properties.

Contact Us
import type { ComponentPropsWithoutRef } from "react";
 
import { Box } from "@optiaxiom/react";
 
import styles from "./App.module.css";
 
export function App() {
  return (
    <DemoBox className={styles.base} transition="colors">
      Contact Us
    </DemoBox>
  );
}
 
function DemoBox(props: ComponentPropsWithoutRef<typeof Box>) {
  return (
    <Box
      color="fg.default"
      display="inline-flex"
      fontWeight="600"
      px="16"
      py="12"
      rounded="sm"
      textAlign="center"
      {...props}
    />
  );
}
Last updated on
Animation