The Developer Brains


CSS3 TRANSITION

Web Designing | Web Development


SEE MORE














</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




















</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





















{transition: background-color 0.3s ease} is this correct.
1. true
2. false




Check Now



CSS3 QUIZ







Next: CSS3 Animations


Previous

      

Next Page













  Share TDB SCHOOL  

Share this E-Learning Website on social media platforms with your friends and followers