CSS - transition-property Property

CSS transition-property property specifies which CSS properties should have a transition effect applied.

Note: If transition-duration property is set to 0, and the transition will have no effect.

Possible Values

  • none − No transitions will occur for any properties.

  • all − Every property that can transition will.

  • <custom-ident> − A string indicating which property should have a transition effect when its value changes.

Applies to

All elements, ::before and ::after pseudo-elements.

When using a shorthand property (e.g., background), all of its longhand sub-properties that support animation will be animated.

Syntax

Keyword Values

transition-property: none;
transition-property: all;

<custom-ident> Values

transition-property: data_05;
transition-property: -data;
transition-property: data-column;

Multiple values

transition-property: data4, animation5;
transition-property: all, height, color;
transition-property:
  all,
  -moz-specific,
  sliding;

CSS transition-property - none Value

The following example demonstrates with transition-property: none no transition effect will be applied to any of the properties −

<html>
<head>
<style>
   .box {
      width: 100px;
      padding: 10px;
      transition-property: none;
      transition-duration: 3s;
      background-color: pink;
   }
   .box:hover,
   .box:focus {
      margin-left: 80px;
      background-color: lightgrey;
   }
</style>
</head>
<body>
   <div class="box">Hover over me</div>
</body>
</html>

CSS transition-property - all Value

The following example demonstrates, with transition-property: all, the transition effect is applied to all the properties that can be animated −

<html>
<head>
<style>
   .box {
      width: 100px;
      padding: 5px;
      transition-property: all;
      transition-duration: 3s;
      background-color: lightgray;
   }
   .box:hover,
   .box:focus {
      margin-left: 80px;
      background-color: pink;
      padding: 15px;
      border: 4px solid blue;
   }
</style>
</head>
<body>
   <div class="box">Hover over me</div>
</body>
</html>

CSS transition-property - <custom-ident> Value

he following example demonstrates the use of CSS custom property (--pink-color) to define a pink color on the background-color property. When you hover over or focus on the box, the background-color of the element changes as per the value of the custom property −

<html>
<head>
<style>
   html {
      --pink-color: pink;
   }
   .box {
      width: 100px;
      padding: 10px;
      transition-property:  background-color; 
      transition-duration: 4s;
      background-color: lightgray;
   }
   .box:hover,
   .box:focus {
      background-color: var(--pink-color); 
   }
</style>
</head>
<body>
   <div class="box">Hover over me</div>
</body>
</html>

CSS transition-property - Using Property Value

The following example demonstrates that when transition-property is set to padding, and as you hover over or focus on the box, the padding value changes to 15px −

<html>
<head>
<style>
   .box {
      width: 100px;
      transition-property: padding;
      transition-duration: 3s;
      background-color: lightgray;
   }
   .box:hover,
   .box:focus {
      padding: 15px;
   }
</style>
</head>
<body>
   <div class="box">Hover over me</div>
</body>
</html>
Advertisements