Lynx
Guide
APIs
Blog
Contribute
Guide
APIs
Blog
Contribute

transition

Introduction

The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.

Example

css-apisrc/transition/App.tsx
Preview

Syntax

/* Apply to 1 property */
/* property name | duration */
transition: background-color 4s;

/* property name | duration | delay */
transition: opacity 4s 1s;

/* property name | duration | easing function */
transition: background-color 4s ease-in-out;

/* property name | duration | easing function | delay */
transition: background-color 4s ease-in-out 1s;

/* Apply to 2 properties */
transition:
  background-color 4s,
  opacity 4s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

/* Clear all transition animation.*/
transition: none;

Formal definition

Initial valueempty value
Applies toall elements
Inheritedno
Animatableno

Formal syntax

transition: <transition-property> || <transition-duration> ||
  <transition-timing-function> || <transition-delay>;

Transition Event

More

Compatibility

LCD tables only load in the browser

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.