@coder 1223
CSS3 TRANSITION
2021-11-16 23:38 · 2 min read
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.
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>
TAGS:
POPULAR POSTS
best free web hosting services...
what is new in miui 11?...
free website ssl security using cloudfla...
do you want to make money online?...
CSS3 @IMPORT RULES...
What is HTML Anchor Tag and Hyperlinks?...
How to create a login page using PHP an...
CSS3 RESPONSIVE UI...
How to host a web page in 10 minutes....
What is HTML Text Formatting and how to ...
Tables HTML...
Dual boot windows 11 and android tv with...
RECENT COMMENTS
2022-03-05 11:05
By coder
on XAMPP - MySQL shutdown unexpectedly | How to fix MySQL crash unexpectedly
2021-10-12 12:34
By abnongoke
on do you want to make money online?
2021-10-12 12:34
By abnongoke
on how to get a free website domain name?
2021-10-12 12:34
By solar panel for shed
on what is new in miui 11?
2021-10-12 12:34
By solar panel for shed
on best free web hosting services
2021-10-12 12:34
By amos tanui
on free website ssl security using cloudflare
