CSS transition-property set the property that the transition effect is used for.
To see the effect of transition-property, you need to use transition-duration, otherwise, the transition-duration is 0 and the transition will not show any effect.
Syntax:
transition-property: none | all | property | initial | inherit;Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.image{
width:200px;
height:100px;
transition-property: width, height;
transition-duration: 2s; /*apply transition-duration 2s*/
}
.image:hover{
width:400px;
height:200px;
}
</style>
</head>
<body>
<h2 class="title">CSS transition-property</h2>
<div class="container">
<center><img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="CSS Hue-rotate Image" class="image"> </center>
<p>
<center>Transition-property effects apply on width and height property.</center>
</p>
</div>
</body>
</html>
Output:
Click below the “Try it Yourself” button to see the result of the CSS transition-property.
You may be interested in the following topics:
- CSS Transition-timing-function
- CSS Transition-property
- CSS Transition-duration
- CSS Transition-delay
- CSS Transition
- CSS Transition (All Properties)