CSS transistion Property
The CSS transition property specifies how to transit a property (such as color, height, etc.) into its target value. It has these 4 properties:
- transition-property: the CSS property (e.g.,
color,weight) to be transitioned, orallif all the transitionabale properties need to be transitioned. - transition-duration: in second (
s) or millisecond (ms). - transition-timing-function: ease|ease-in|ease-out|ease-in-out|linear|cubic-bezier()|steps(): the function describes how the intermediate values during the transistion are calculated.
- transition-delay: delay in second (
s) or millisecond (ms) before the transition starts. - (Shorthand) transition: property duration timing-function delay
Example 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test CSS "transition" Property</title>
<style>
.bg-transition {
transition: background-color 5s; /* shorthand for: property duration */
}
div:hover {
background-color: red; /* apply transition from normal to this value */
}
div {
background-color: lightgray; /* normal state */
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div class="bg-transition"></div>
</body>
</html>
When the mouse pointer hovers over the element, the background color transitions from normal state to the new value in 5 second.
Example 2
Three properties are transitioned in this example, with various durations and delays.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test CSS "transition" Property</title>
<style>
.transition {
transition-property: height, width, background-color;
transition-duration: 1s, 1s, 5s;
transition-timing-function: linear;
transition-delay: 0s, 1s, 0s;
}
.transition-all {
transition: all 3s; /* all transitionable properties */
}
div:hover {
height: 200px;
width: 200px;
background-color: red;
}
div {
background-color: lightgray;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="transition"></div>
<div class="transition-all"></div>
</body>
</html>
支付宝打赏
微信打赏