Css3 Transition Belongings Basics

While browsing roughly sites, nosotros tin run into an interesting upshot on roughly links. Most of the time, when you lot hover over a link, something changes inwards its style: it volition either alter its color or background, or volition locomote underlined.

What most this cool upshot that consists inwards gradual transition from i mode to roughly other that you lot tin run into inwards the representative 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 require the -webkit- prefix to teach 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 alter your mode completely
• the delay fourth dimension for the transition to locomote executed, too inwards seconds, i.e. how long it takes for the transition to start when the mouse hovers over that element;

Check out the code below:

.example {
 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 */
/* instantly nosotros volition repeat the entire annunciation amongst the -webkit- prefix for the upshot 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;
}

In the representative above, the elements amongst the .example course of report volition locomote broad inside 2 seconds every bit the mouse passes over them.

When nosotros define the mode of a link, commonly nosotros require to utilization the a:link selector, in addition to when defining the mode when the mouse is over the link, nosotros require to utilization the :hover selector. However, the transition tin locomote used inwards whatsoever HTML element, non simply links.

To brand the transition upshot 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 {
/* 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 ingredient */
/* hither it is non necessary to repeat the annunciation of the transition */
}

You tin add together the same mode on multiple selectors separated past times commas every bit you lot tin run into above, although it is non necessary.

Below are roughly transition examples amongst their respective CSS codes. I volition non utilization 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 */
#example2 {
background-color: #9c3;
border: 8px company #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;
}

Example 3:

Transition example

/* amongst 7 properties in addition to delay */
#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;
}

Example 4:

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 require to look inwards the CSS. In Blogger, the CSS is located earlier ]]</b:skin>
• as you lot tin run into inwards the examples above, you lot tin assign dissimilar rules for the transitions of dissimilar elements inwards a unmarried dominion - simply dissever them amongst commas.
• it is non mandatory to utilization the 4 properties inwards the transition declaration, but their guild must ever expect similar this: property/duration/timing-function/delay.
• the duration in addition to delay values ​​must locomote expressed inwards seconds, but sometimes a minute is a long fourth dimension for a transition. In this case, you lot tin utilization values amongst milliseconds, for example, .5s agency one-half a second.
• In minor fourth dimension intervals, the timing of the transition-function belongings does non give a remarkable upshot existence most useful solely inwards to a greater extent than advanced animations. The possible values are either ease (the default, which makes the transition amongst a ho-hum beginning, in addition to then gets faster in addition to ends slowly), linear (the same transition speed from starting fourth dimension to end), ease-in (transition begins like shooting fish in a barrel in addition to and then the speed increases), ease-out (transition starts fast in addition to slows downwardly at the end) in addition to ease-in-out

Share this post