Page Stats
Visitor: 343
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: