CSS Transition
Advertisements
CSS Transition
The CSS transitions are used to change effect on the Html element gradually (slowly-slowly) from one style to another, without using flash or JavaScript.
You need to specify two things for create CSS transition.
- The CSS property on which you want to add an effect.
- The time duration of the effect.
Note: Transition will we started when you move curson on it. You must need to specify time duration other wise Transition have no effect. The default time value is zero.
CSS width values
| Property | Description |
|---|---|
| transition | A shorthand property for setting the four transition properties into a single property . |
| transition-delay | Specifies when the transition effect will start. |
| transition-duration | Specifies how many seconds or milliseconds a transition effect takes to complete . |
| transition-property | Specifies the name of the CSS property the transition effect is for. |
| transition-timing-function | Specifies the speed curve of the transition effect. |
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: green;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
div:hover {
width: 400px;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>
Output
Multiple Change
If you want to add transition effects for more than one CSS property, separate the properties with a comma:
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: cyan;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 3s, height 3s, transform 3s;
}
div:hover {
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
}
</style>
</head>
<body>
<div> </div>
</body>
</html>
Output
Hover over me to see the transition effect!
Browser supported
| Properties | |||||
| transition | Yes | Yes | Yes | Yes | Yes |
Google Advertisment