CSS transition-property Property
CSS transition-property Property
CSS transition-property property sets the CSS properties to which a transition effect should be applied.
Example
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
#outerDiv p{
width: 100%;
text-align: center;
}
#outerdiv{
width: 100%;
height: 150px;
border: 1px solid #267326;
padding: 10px;
display: flex;
position: relative;
text-align: center;
}
#innerdiv{
width: 80px;
height: 80px;
background-color: teal;
color: #fff;
line-height: 4;
border: 1px solid #004d4d;
position: absolute;
top: 5%;
left: 1%;
transition-property: left;
-webkit-transition-property: left;
transition-duration: 1s;
-webkit-transition-duration: 1s;
}
#outerDiv:hover > #innerdiv{
left: 85%;
background-color: red;
}
</style>
</head>
<body>
<h1>CSS transition-property Property</h1>
<div id="outerDiv">
<p>Hover Me</p>
<div id="innerDiv">Div</div>
</div>
</body>
</html>
Syntax
Using CSS
element{
transition-property: left;
}
Using Javascript
object.style.transitionProperty="left";
Animatable
No, transition-property property is not animatable. CSS Animatable Properties Reference.
Default Value
Default value for CSS transition-property property is all.
Property Value
The following table provides a list of values for CSS transition-property property.
| Value | Explanation |
|---|
| none | No properties will transition. |
| all | All properties that can transition will. |
| property | A string identifying the property to which a transition effect should be applied when its value changes. |
Using JavaScript
In the following example, we will demonstrate how to change the CSS transition-property property of an element using JavaScript.
Example
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
#outerDiv p{
width: 100%;
text-align: center;
}
#outerdiv{
width: 100%;
height: 150px;
border: 1px solid #267326;
padding: 10px;
margin-bottom: 25px;
display: flex;
position: relative;
text-align: center;
}
#innerdiv{
width: 80px;
height: 80px;
background-color: teal;
color: #fff;
line-height: 4;
border: 1px solid #004d4d;
position: absolute;
top: 5%;
left: 1%;
transition-duration: 3s;
-webkit-transition-duration: 3s;
}
#outerDiv:hover > #innerdiv{
left: 85%;
background-color: red;
}
</style>
</head>
<body>
<h1>CSS transition-property Property</h1>
<div id="outerDiv">
<p>Hover Me</p>
<div id="innerDiv">Div</div>
</div>
<button onclick="myFunction()">Click Me</button>
<script>
var x = document.getElementById("innerDiv");
function myFunction(){
x.style.transitionProperty = "left";
x.style.WebkitTransitionProperty = "left";
}
</script>
</body>
</html>
Reminder
Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in CSS.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
Share this Page
Meet the Author
