In many websites HTML element’s CSS styles changes from one to another dynamically or with user actions. This is done by two ways either animation or transition.
In this post we will discussed about the CSS transition properties, rules for applying transition property, changing several property values, speed of transition, etc,..
 |
| CSS transition |
What is transition?
The transition in CSS modify the value of properties of CSS selectors.
For example, when user hover on button its background color changes. CSS provides various transition properties to do so.
Rules for using transition property
To apply transition effects following conditions will apply.
• Specify the CSS property on which transition will apply.
• After specifying transition property, must specify the duration of transition i.e. transition-duration.
Note:-
If you not specify the transition- duration then transition of element will not occur.( Because its default value is zero).
On which types of CSS properties the transition may apply?
CSS property which have distinct value. On following types of properties the transition may applied.
The layout properties like margin, padding, height, width, borders, etc..
The positional properties like top, left, right, bottom..
Colors, fonts, text alignment, etc…
There is some issues with none and hidden values.(in display and visibility property). When you specify such values there is no transition occurs between start and end phase.
The transition properties
1) transition-property :-
The transition-property specify name of the property on which transition effect will apply.
For example, if you want to change font thin to bold on hover text then specify font-weight property to transition-property.
2) transition-duration :-
The transition-duration property specify time period in which transition starts and completed. Time is specifies in seconds or milliseconds.
Following example demonstrates that how text becomes bold when hover on text using transition-property and transition-duration.
<!DOCTYPE html> <html> <head> <title>Transition</title> <style> p{ font-size:28pt; transition-property:font-weight; transition-duration:5s; } p:hover{ font-weight:bold;} </style> </head> <body> <p>Click me to get bold text</p> </body> </html>
Output:-
3) transition-delay
The transition-delay property specifies that after how much time transition will starts. (Time specify in seconds or milliseconds)
In example transition of color property starts after 5 seconds.
<!DOCTYPE html> <html> <head> <title>Transition</title> <style> h1{ background-color:#ff0; color:#f00; transition-property:color; transition-duration:3s; transition-delay:5s;} h1:hover{ color:#00f; } </style> </head> <body> <h1>Click me!!</h1> </body> </html>
Output:-
4) transition-timing-function
The transition-timing-function property specify variety in speed of transition. This property have following values which specifies the different speed curve.
ease
The default value. Transition effect starts slowly, then accelerate quickly and end with slowly.
ease-in
Transition starts slowly then accelerate and abruptly end.
ease-out
Transition starts quickly but end slowly.
linear
Transition’s speed remains same during whole transition.
ease-in-out
Transition starts slowly then accelerate and ends with slowly.
Following example demonstrates transition-timing-function property and its above five values.
In example transition of elements from right to left.
<!DOCTYPE html> <html> <head> <title>Transition</title> <style> .main{ background-color:#ccc; } .eas,.easin,.linear,.easout,.easinout{ height:40px; width:40px; margin-left:300px; text-align:center; background-color:#f00; transition-property:margin-left; transition-duration:3s; transition-delay:1s;} .eas{ transition-timing-function:ease;} .easin{ transition-timing-function:ease-in;} .easout{ transition-timing-function:ease-out;} .linear{ transition-timing-function:linear;} .easinout{ transition-timing-function:ease-in-out;} .eas:hover,.easin:hover,.linear:hover,.easout:hover,.easinout:hover{ margin-left:50px;} </style> </head> <body> <div class="main"> <h4>ease</h4> <div class="eas"></div><hr> <h4>ease-in</h4> <div class="easin"></div><hr> <h4>ease-out</h4> <div class="easout"></div><hr> <h4>linear</h4> <div class="linear"></div><hr> <h4>ease-in-out</h4> <div class="easinout"></div> </div> </body> </html>
Output:-
cubic-bezier
cubic-bezier allows you to specify your own values into bracket. The cubic-bezier() function has four values. First value defines starting point and second value defines ending point.
Example
<!DOCTYPE html> <html> <head> <title>Transition</title> <style> .cubic{ height:40px; width:40px; margin-left:50px; background-color:#f5c; border-radius:20px; transition-property:width; transition-duration:3s; transition-timing-function:cubic-bezier(0.1,0.3,0.5,0.7); } .cubic:hover{ width:300px;} </style> </head> <body> <h4>cubic-bezier</h4> <div class="cubic"></div> </body> </html>
Output:-
The shorthand property
The transition property is shorthand property for all above individual transition properties.
Example
<!DOCTYPE html> <html> <head> <title>Transition</title> <style> .demo{ height:200px; width:200px; border:5px solid #f00; background-color:#acc; transition:border-color 2s linear 1s;} .demo:hover{ border-color:#00f;} </style> </head> <body> <div class="demo"></div> </body> </html>
Output:-
Apply transition to multiple CSS properties
You can also apply transition effect to more than one CSS properties.
Following example demonstrates transition of two properties: background-color and margin-left.
<!DOCTYPE html> <html> <head> <title>Transition</title> <style> .ex{ height:100px; width:100px; background-color:#f00; transition:margin-left 3s,background-color 4s;} .ex:hover{ margin-left:200px; background-color:#0f0;} </style> </head> <body> <div class="ex"></div> </body> </html>
Output:-
Combining transition and transform
When transform and transition used together it creates fantastic effect.
Following are the examples of transformation of element using transition.
Example-1
Rotate element at 225 degree.
<!DOCTYPE html> <html> <head> <title>Transition and Transform</title> <style> .rotat{ height:100px; width:100px; margin:100px; border-radius:0px 50px 0px 50px; background-color:#b02; transition:transform 2s linear;} .rotat:hover{ transform:rotate(225deg);} </style> </head> <body> <div class="rotat"></div> </body> </html>
Output:-
Example-2
Translate element 150px right and 100px bottom from its original position.
<!DOCTYPE html> <html> <head> <title>Transition and Transform</title> <style> .translt{ height:100px; width:100px; margin:100px; background-color:#f0a; transition:transform 2s ease;} .translt:hover{ transform:translate(150px,100px);} </style> </head> <body> <div class="translt"></div> </body> </html>
Output:-
Example-3
rotate3d() with transition.
<!DOCTYPE html> <html> <head> <title>Transition and Transform</title> <style> .original{ perspective:300px; height:100px; width:100px; margin:100px; border:2px solid #00f; } .rotat3d{ height:100px; width:100px; background-color:#f00; transition:transform 2s ease-in;} .rotat3d:hover{ transform:rotate3d(1,1,1,180deg);} </style> </head> <body> <div class="rotat3d"></div> </body> </html>
Output:-
Difference between Transition and Animation
As you see that transition and animation are similar in some perspective. Both properties’ task is same: changes in CSS styles of an element. But there are some significant differences between two properties.
| Transition | Animation |
|---|---|
| Only two phases: start and end, no intermediate phases. | An intermediate phases are available in animation. |
| Useful to make changes at once. | Useful when creating complex series of movements. |
| To run transition trigger is required.(hover on element) | Animation can run with or without trigger. |
| Transition can runs only one time. | Animation can be run multiple times or infinite loop with animation-iteration-count property. |
0 Comments