Page Stats
Visitor: 820
CSS3 Transitions
CSS3 transitions allows you to change property values smoothly, over a given duration.
Example 1: Mouse over the element below to see a CSS3 transition effect:
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
padding:10px;
background: #ffc;
border:1px solid red;
-webkit-transition: width 2s;
-moz-transition: width 2s;
-o-transition: width 2s;
transition: width 2s;
}
div:hover {
width: 350px;
}
</style>
</head>
<body>
<div>Hover over the div element, to see the transition effect.</div>
</body>
</html>
Change Several Property Values
Example 2: Adds a transition effect for both the width and height properties.
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 4s;
transition: width 2s, height 4s;
}
div:hover {
width: 280px;
height: 280px;
}
</style>
</head>
<body>
<div>Hover over the div element, to see the transition effect.</div>
</body>
</html>
CSS3 transition-timing-function property
The transition-timing-function property specifies the speed curve of the transition effect.
The transition-timing-function property can have the following values:
- ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default).
- linear - specifies a transition effect with the same speed from start to end.
- ease-in - specifies a transition effect with a slow start.
- ease-out - specifies a transition effect with a slow end.
- ease-in-out - specifies a transition effect with a slow start and end.
- cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function.
Example 2: Difference between linear transition, ease transition, ease-in transition, ease-out transition, ease-in-out transition.
Transition + Transformation
We can specify both the transition and transformation.
Output: