With CSS3 transitions we can create animation by changing CSS properties.
We can control the time, from value, to value.
For example, we can change the color of an element from white to black, in one second.
The following table lists all the transition properties:
To create animation with CSS3 transition, we have to specify two values:
The following code adds a transition effect on the width property, with a duration of 2 seconds.
We first sets the target property and duration.
div { -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s; }
If the duration part is not specified, the default value is 0, and there would be no transition.
The we have to trigger the property change. The following code uses mouse-over event to trigger animation on an element.
div:hover { width: 300px; }
Here is the complete source code. Hover over the div element above, to see the transition effect.
<!DOCTYPE html>
<html>
<head>
<style>
div {<!--from w ww . j av a2 s. c o m-->
width: 100px;
height: 100px;
background: black;
-webkit-transition: width 2s;
transition: width 2s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<div>Hi</div>
</body>
</html>
We can add transition effects for more than one CSS property by separating the properties with a comma.
<!DOCTYPE html>
<html>
<head>
<style>
div {<!--from ww w . ja va 2s . c o m-->
width: 100px;
height: 100px;
background: black;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
</style>
</head>
<body>
<div>Hover me to see the transition effect!</div>
</body>
</html>
The code above is rendered as follows:
Property | Description | CSS |
---|---|---|
transition-delay | Delay before the transition | 3 |
transition-duration | Set the duration of the transition | 3 |
transition-property | Set the name of the CSS property in the transition effect | 3 |
transition-timing-function | Set the speed curve of the transition effect | 3 |
transition | Shorthand property for setting the four transition properties | 3 |