The transition property in CSS is used to make some transition effects. The transition is the combination of four properties which are listed below:
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
Note: The transition effect can be defined in two states (hover and active) using pseudo-classes like hover or: active or classes dynamically set by using JavaScript.
Syntax:
transition: transition-property transition-duration
transition-timing-function transition-delay;
Note: If any of the values are not defined then the browser assumes the default values.
Property Values:
- transition-property: It specifies the CSS properties to which a transition effect should be applied.
- transition-duration: It specifies the length of time a transition animation should take to complete.
- transition-timing-function: It specifies the speed of transition.
- transition-delay: It specifies the transition delay or time when the transition starts.
Example: In this example, we are using the above-explained property.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS transition Property
</title>
<style>
div {
width: 100px;
height: 270px;
background: green;
transition: width 5s ease-in .2s;
display: inline-block;
}
div:hover {
width: 300px;
}
</style>
</head>
<body style="text-align:center;">
<h1>GeeksforGeeks</h1>
<h2>Transition Property</h2>
<div>
<p>transition-property: width</p>
<p>transition-duration: 5s</p>
<p>transition-timing-function: ease-in</p>
<p>transition-delay: .8s</p>
</div>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by transition property are listed below:
- Google Chrome 26 and above
- Edge 12 and above
- Internet Explorer 10 and above
- Firefox 16 and above
- Opera 12.1 and above
- Safari 9 and above
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
19 Jun, 2023
Like Article
Save Article