#transition-property

#Introduction

The transition-property CSS property sets the CSS properties to which a transition effect should be applied.

#Examples

css-apisrc/transition-property/App.tsx

Code

Preview

#Syntax

/* Keyword values */
transition-property: none;
transition-property: all;

/* <custom-ident> values */
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;

/* Multiple values */
transition-property: test1, animation4;
transition-property: all, height, color;

#Values

• left
• right
• top
• bottom
• width
• height
• opacity
• background-color
• color
• transform
• transform-origin
• max-width
• min-width
• max-height
• min-height
• padding-left
• padding-right
• padding-top
• padding-bottom
• margin-left
• margin-right
• margin-top
• margin-bottom
• border-left-width
• border-right-width
• border-top-width
• border-bottom-width
• border-left-color
• border-right-color
• border-top-color
• border-bottom-color
• flex-basis
• flex-grow
• filter

#Formal definition

#Formal syntax

transition-property =
  none                           |
  <single-transition-property>#

<single-transition-property> =
  all             |
  <custom-ident>

#More

• transition-delay
• transition-duration
• transition
• transition-timing-function
• Animation Event

#Compatibility