/

HTML / CSS / JavaScript Tutorial

CSS Property: transition-property

[this page | pdf | back links]

The CSS (CSS3) transition-property property identifies the properties that change as part of a transition effect. You should always specify the transition-duration property as well, as otherwise it defaults to zero.

 

Valid property values (other than inherit and initial) are:

 

Value

Description

property

Comma separated list of CSS properties to which transition is applied

all

(default value). Transition effect is applied to all CSS properties

none

Transition effect is applied to no properties

 

Default Value:

all

JavaScript syntax:

e.g. object.style.transitionProperty="width"

Inherited:

No

Animatable:

No

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
p {width: 200px; height: 40px; border: 2px solid green;}
p.x1 {transition-property: height;}
p:hover {width: 300px; height:60px;}
</style>
</head>
<body>
Hover over element to see transition effect
<p>Element with default property</p>
<p class="x1">Property set using HTML</p>
<p id="x2">Property set using JavaScript</p>

<script>
document.getElementById("x2").style.transitionProperty = "width";
</script>

</body>
</html>

FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyTransitionProperty() {
  var x = document.createElement("DIV"); x.style.transitionProperty = "height"; return (window.getComputedStyle(x, null).transitionProperty == "height");
}


NAVIGATION LINKS
Contents | Prev | Next | CSS Properties


Desktop view | Switch to Mobile