Home >>CSS Tutorial >CSS Transition
CSS Transition
CSS Transition
The CSS transition allows you to change the way in which the transition takes place between the two states of the element over a given duration without using JavaScript or flash.
Transition are like a grease in the wheel of CSS transition. By using the CSS transition you have a full control to change the property values smoothly. Let’s understand an example of CSS transition, when an hovering your mouse over a div, you can change the background color of the element with the help of pseudo-class and CSS Selector. We can use the transitions to animate the changes.
You have a two things to create CSS transition.
- On which CSS property you want to add effects.
- Time duration of the effect
Let's take an Example of CSS transition:
<!DOCTYPE html>
<html>
<head>
<style>
div.trans {
width: 100px;
height: 100px;
background: #54aae3;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
div.trans:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>The transition Property</h1>
<p>Hover over the div element, to see the transition effect:</p>
<div class="trans"></div>
</body>
</html>
The transition Property
Hover over the div element, to see the transition effect:
CSS Transition Properties
These are the following CSS transition properties:
| Property | Description |
|---|---|
| Transition | It has a shorthand property for setting the four transition properties into a single code. |
| Transition-property | It defines the name of the CSS property the transition effect takes place. |
| Transition-timing-function | It is used to define the speed curve of the transition effect. |
| Transition-delay | It can defines the delay for the transition effect. |
| Transition-duration | It defines that in how many a transition effect can takes to complete. |
Let's take another example of transition rotate:
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding:15px;
width: 150px;
height: 100px;
background: #f2a011;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 250px;
height: 150px;
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
}
</style>
</head>
<body>
<div><b>Phptpoint.com</b><p>Move your cursor on me..</p></div>
</body>
</html>
Move your cursor on me..