</CSS3 TRANSITION PROPERTY>

A transition property is a CSS3 shorthand property used to represent transition for a duration. The Transition Property allows CSS properties to change their values over a specific duration.

SEE MORE

Style_Sheets @Import_Rule Structure Box_Model Background_Image Media_Queries Fonts Box_Shadow FlexBox Grid Animations 2D_Transform 3D_Transform Filter_Property Inheritance Vertical_Centering Responsive_UI CSS_Quiz

</CSS3 Transition>

How to use CSS3 Transition Property?

CSS3 Selectors are used to select the HTML elements for styling.

Transition Shorthand Property Contains following Properties

transition-property
transition-duration
transition-timing-function
transition-delay


<style>
/*example*/
.tdb-div {
  transition: background-color 0.3s ease;
  background-color: pink;
}
.tdb-div:hover {
  background-color: red;
}
</style>

CSS3 SYNTAX
transition: property duration timing-function delay | inherit | initial;
Default value:
all 0s ease 0s;


	

<head>
<style>
/*example*/
.tdb-div {
  transition: background-color 0.7s ease;
  background-color:black;
  color:white;
  cursor:pointer;
  padding:30px;
}
.tdb-div:hover {
  background-color: gray;
  color:red;
}
</style>
</head>

<body>
	<div class="tdb-div">
	Transition
	</div>

</body>

Try it Yourself