Transition:
The transition is the new feature that is introduced by CSS3. The transition means the change of its state. Always remember the hover is the appropriate selector for happening transition of an element. CSS3 transition can change the style of an element and can give a time effect during changing. It has some properties:
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
The transition-property :
The transition-property specifies the change of the width or height or both of an element.
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <title>css</title> <style> div{ height: 51px; width:51px; background: #A8B8F8; -webkit-transition-property:width; -o-transition-property:width; -moz-transition-property:width; transition-property:width; } div:hover { width:101px; } </style> </head> <body> <div id="dv1"> Increase width</div> </body> </html> |
Output:
The transition-duration property:
The transition-duration property specifies the time that is taken by an element. The unit of this property is millisecond (ms) or second (s). The initial value is 0. If value is 0 then no time effect is applied.
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <head> <title>css</title> <style> div{ height: 51px; width:51px; background: #A8B8F8; -webkit-transition-property:width; -o-transition-property:width; -moz-transition-property:width; transition-property:width; -webkit-transition-duration: 6s; -o-transition-duration: 6s; -moz-transition-duration: 6s; transition-duration: 6s; } div:hover {width:101px;} </style> </head> <body> <div id="dv1"> Increase width</div> </body> </html> |
The transition-timing-function:
The transition-timing-function defines the speed of transition.
Some about the value:
value | start | end |
linear | normal | normal |
ease | Slow -> fast | Fast -> slow |
ease-in | slow | normal |
ease-out | normal | slow |
ease-in-out | slow | cubic-bezier(0.42,0,0.58,1) |
cubic-bezier(x,x,x,x) | x | x |
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<!DOCTYPE html> <html> <head> <title>css</title> <style> div{ height: 51px; width:51px; background: #A8B8F8; -webkit-transition-property:width; -o-transition-property:width; -moz-transition-property:width; transition-property:width; -webkit-transition-duration: 6s; -o-transition-duration: 6s; -moz-transition-duration: 6s; transition-duration: 6s; transition-timing-function: ease-in; -webkit-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; } div:hover {width:101px;} </style> </head> <body> <div id="dv1"> Increase width</div> </body> </html> |
Output:
The transition-delay property:
The transition-delay property defines the time after when the transition is occurring.
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!DOCTYPE html> <html> <head> <title>css</title> <style> div{ height: 51px; width:51px; background: #A8B8F8; -webkit-transition-property:width; -o-transition-property:width; -moz-transition-property:width; transition-property:width; -webkit-transition-delay: 6s; -o-transition-delay: 6s; -moz-transition-delay: 6s; transition-delay: 6s; } div:hover {width:101px;} </style> </head> <body> <div id="dv1"> Increase width</div> </body> </html> |
Output:
The transition property:
The transition property is the shorthand of all properties of its.
Syntax:
transition: transition-property transition-duration transition-timing-function
transition-delay;
Example:
1 |
Transition: width 6s ease-in 3s; |
🙂 🙂 Copy these code and test yourselves. 🙂 🙂
Hi,
I need to have more information for using different fonts to beautify my own site… Can you please describe more :)..
Thanks.