What almost this cool resultant that consists inwards gradual transition from 1 mode to about other that you lot tin flame come across inwards the instance below:
Hover Over Me!
This transition is achieved past times using the CSS3 transition belongings - belongings which is supported inwards all major browsers such every bit Chrome, Firefox, Opera, Safari (for Safari nosotros volition postulate the -webkit- prefix to larn this effect).
The CSS3 Transition Syntax
The syntax of the transition supports 4 values:- the belongings affected past times the transition, such every bit color, border, background, width, etc.
- the duration of this transition inwards seconds, i.e. how long volition it accept to modify your mode completely
- the delay fourth dimension for the transition to hold upwards executed, besides inwards seconds, i.e. how long it takes for the transition to start when the mouse hovers over that element;
.example {In the instance above, the elements amongst the .example cast volition larn broad inside 2 seconds every bit the mouse passes over them.
transition-property: width; /* belongings that undergoes a transition */
transition-duration: 2s; /* duration of the transition */
transition-timing-function: linear; /* timing-function */
transition-delay: 0; /* length of fourth dimension to delay the start of a transition */
/* straightaway nosotros volition repeat the entire proclamation amongst the -webkit- prefix for the resultant to piece of job inwards Chrome in addition to Safari */
-webkit-transition-property: width;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 0;
}
When nosotros define the mode of a link, commonly nosotros postulate to exercise the a:link selector, in addition to when defining the mode when the mouse is over the link, nosotros postulate to exercise the :hover selector. However, the transition tin flame hold upwards used inwards whatever HTML element, non only links.
To brand the transition resultant to piece of job properly, nosotros should define 2 blocks of mode for that element, i.e. the normal mode for a tag/id/class in addition to the mode on mouse :hover for a specific tag/id/class.
For example:
tag, #id, .class {You tin flame add together the same mode on multiple selectors separated past times commas every bit you lot tin flame come across above, although it is non necessary.
/* insert hither the styles that you lot desire for the selector */
/* insert below the transition effects */
}
tag:hover, #id:hover, class:hover {
/* Insert hither the styles for when the mouse is over the chemical cistron */
/* hither it is non necessary to repeat the proclamation of the transition */
}
Below are about transition examples amongst their respective CSS codes. I volition non exercise the transition-timing-function inwards these examples because it makes no difference, every bit the foremost value is the duration inwards seconds in addition to the minute is the delay.
Example 1:
Transition example
/* amongst a unmarried belongings */
#example1 {
background-color: #FFFF00;
-moz-transition-property: background-color;
-moz-transition-duration: 2s;
-webkit-transition-property: background-color;
-webkit-transition-duration: 2s;
-o-transition-property: background-color;
-o-transition-duration: 2s;
}
#example1:hover {
background-color: #B5E2FF;
}
Example 2:
Transition example
/* amongst 4 properties in addition to delay */Example 3:
#example2 {
background-color: #9c3;
border: 8px corporation #690;
padding: 20px;
color: #fff;
-moz-transition-property: background-color,border;
-moz-transition-duration: 1s;
-webkit-transition-property: background-color,border;
-webkit-transition-duration: 1s;
-o-transition-property: background-color,border;
-o-transition-duration: 1s;
}
#example2:hover {
background-color: #690;
border: 8px dashed #fff;
color: #FFFF00;
-moz-transition-property: background-color,border;
-moz-transition-duration: 2s;
-webkit-transition-property: background-color,border;
-webkit-transition-duration: 2s;
-o-transition-property: background-color,border;
-o-transition-duration: 2s;
}
Transition example
/* amongst 7 properties in addition to delay */Example 4:
#example3 {
padding: 15px;
background-color: #FF7CA6;
font-size: 16px;
width: 30%;
font-weight: bold;
color: #fff;
height: 20px;
-moz-transition-property: background-color,width,height,padding,font-size,color;
-moz-transition-duration: 1s;
-webkit-transition-property: background-color,width,height,padding,font-size,color;
-webkit-transition-duration: 1s;
-o-transition-property: background-color,width,height,padding,font-size,color;
-o-transition-duration: 1s;
}
#example3:hover {
background-color:#9c3;
width: 60%;
height: 60px;
padding: 50px;
font-size: 30px;
color: #FFFF00;
-moz-transition-property: background-color,width,height,padding,font-size,color;
-moz-transition-duration: 2s;
-webkit-transition-property: background-color,width,height,padding,font-size,color;
-webkit-transition-duration: 2s;
-o-transition-property: background-color,width,height,padding,font-size,color;
-o-transition-duration: 2s;
}
Transition example
/* amongst all the properties simultaneously */
#example4 {
padding: 15px;
background-color: #9c3;
color: #fff;
font-size: 16px;
width: 30%;
font-weight: bold;
transition: all 2s;
-webkit-transition: all 2s;
}
#example4:hover {
background-color: #FF7CA6;
color: #242424;
width: 60%;
}
Final words:
- the transition declarations postulate to look inwards the CSS. In Blogger, the CSS is located earlier ]]</b:skin>
- as you lot tin flame come across inwards the examples above, you lot tin flame assign unlike rules for the transitions of unlike elements inwards a unmarried dominion - only carve upwards them amongst commas.
- it is non mandatory to exercise the 4 properties inwards the transition declaration, but their lodge must ever await similar this: property/duration/timing-function/delay.
- the duration in addition to delay values must hold upwards expressed inwards seconds, but sometimes a minute is a long fourth dimension for a transition. In this case, you lot tin flame exercise values amongst milliseconds, for example, .5s agency one-half a second.
- In small-scale fourth dimension intervals, the timing of the transition-function belongings does non give a remarkable resultant existence most useful exclusively inwards to a greater extent than advanced animations. The possible values are either ease (the default, which makes the transition amongst a tedious beginning, thus gets faster in addition to ends slowly), linear (the same transition speed from get-go to end), ease-in (transition begins slow in addition to thus the speed increases), ease-out (transition starts fast in addition to slows downwards at the end) in addition to ease-in-out
Comments