Transition property itself (transition-property)

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.

Syntax:

selector {

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

}

Values:

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.
initial, inherit

Example

The transition-property example:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
    font-family:Arial; color:#eee; 
    background-color:#e3333e;
  }
div {
    width: 80%; padding:1.0em;
    line-height:1.2em;
    background: green;
    transition-property: padding, line-height;
        -webkit-transition-property:padding, line-height; /* Safari, Chrome */
        -moz-transition-property: padding, line-height; /* Firefox */
    transition-duration: 0.5s;
        -webkit-transition-duration: 0.5s; /* Safari, Chrome */
        -moz-transition-property: 0.5s; /* Firefox */
}
div:hover {
    padding:0.6em; line-height:1.0em;
}
</style>
</head>
<body>

<h3>A simple DIV container with transition-property property:</h3>

<div>Hover over the box and to see the transition effect in action.</div>

</body>
</html>

›› go to examples ››

Transition property itself (transition-property)

Syntax:

Values:

Example

The transition-property example:

Comments

About

Contact

Get Connected