The transition-property property is used to specify the CSS property that the transition effect will be applied to.

NOTE: A transition effect is usually applied on hovering events. Important is to remember when using the transition-property as a standalone, to add transition-duration to it or else it will be set to 0.


selector { 

         transition-property: none | all | property | initial | inherit;



Possible values for transition-property are:

  • none; No property will be affected.
  • all; This is default value and it will make all transition properties be affected.
  • property; A comma separated list of properties to apply the effect onto.
  • initialinherit


The transition-property example:


›› go to examples ››