transition
CSS transition Property
The transition CSS property is a shorthand property for the following properties:
transition-property
transition-duration
transition-timing-function
transition-delay
The transition property is one of the CSS3 properties.
The transition-duration should be specified first because, by default, it will be 0s and the property will not have an effect.
The properties are separated by commas.
If more than one transition is specified and any of the transitions have “none” as the transition-property, then the declaration is not valid.
The transition properties allow specifying the transition between two states of an element. Different states may be defined using pseudo-classes like :hover or :active or with the help of JavaScript.
For maximum browsers compatibility extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -moz- for Firefox, -o- for older versions of Opera are used with this property.
| 类目 | 类目 |
|---|---|
| Initial Value | all 0s ease 0s |
| Applies to | All elements, ::before and ::after pseudo-elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | Object.style.transition = “all 3s”; |
Syntax
Syntax
transition: transition-property | transition-duration | transition-timing-function | transition-delay | initial | inherit;
Example of the transition property with the :active pseudo class:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 150px;
height: 100px;
background: #8ebf42;
-webkit-transition: width 2s;
-moz-transition: width 2s;
-o-transition: width 2s;
transition: width 2s;
}
div:active {
width: 600px;
}
</style>
</head>
<body>
<h2>Transition property example</h2>
<p>Click and hold to see the transition effect.</p>
<div></div>
</body>
</html>
Example of the transition property with the :hover pseudo class:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #fff;
color: #000;
font-size: 1em;
font-family: 'Roboto', Helvetica, sans-serif;
}
.element {
padding: 20px;
width: 50px;
height: 50px;
left: 0;
background-color: #8ebf42;
position: relative;
-webkit-transition: left 1s ease-in-out, background-color 1s ease-out 1s;
-moz-transition: left 1s ease-in-out, background-color 1s ease-out 1s;
-o-transition: left 1s ease-in-out, background-color 1s ease-out 1s;
transition: left 1s ease-in-out, background-color 1s ease-out 1s;
}
.example:hover .element {
left: 400px;
background-color: #1c87c9;
}
.element-2 {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}
</style>
</head>
<body>
<h2>Transition property example</h2>
<div class="example">
<p>Hover over the container to see the transition effect.</p>
<div class="element element-1"></div>
<p>No transition:</p>
<div class="element element-2"></div>
</div>
</body>
</html>
Values
Values
| Value | Description |
|---|---|
| transition-property | Specifies the names of the properties for the transition. |
| transition-duration | Specifies the duration of the transition animation. |
| transition-timing-function | Specifies the speed over time of an object being transitioned from one value to another. |
| transition-delay | Specifies the amount of time to wait before a transition effect is animated. |
| initial | Makes the property use its default value. |
| inherit | Inherits the property from its parents element. |