CSS Transitions






<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]
-->



CSS Transitions



❮ Previous
Next ❯


CSS Transitions


CSS transitions allows you to change property values smoothly (from one value to another), over a given duration.


Example: Mouse over the element below to see a CSS transition effect:



CSS



Browser Support for Transitions


The numbers in the table specify the first browser version that fully supports the property.


Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.




















































Property
transition 26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-
transition-delay 26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-
transition-duration 26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-
transition-property 26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-
transition-timing-function 26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-



How to Use CSS Transitions?


To create a transition effect, you must specify two things:



  • the CSS property you want to add an effect to

  • the duration of the effect


Note: If the duration part is not specified, the transition will have no effect, because the default value is 0.


The following example shows a 100px * 100px red <div> element. The <div>
element has also specified a transition effect for the width property, with a duration of 2 seconds:



Example



div
{
    width: 100px;
    height: 100px;
   
background: red;
   
-webkit-transition: width 2s; /* Safari */
   
transition: width 2s;
}



The transition effect will start when the specified CSS property (width) changes value.


Now, let us specify a new value for the width property when a user mouses over the <div> element:



Example



div:hover
{
   
width: 300px;
}

Try it Yourself »

Notice that when the cursor mouses out of the element, it will gradually change back to its original style.






<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]
-->




Change Several Property Values


The following example adds a transition effect for both the width and height property, with a duration
of 2 seconds for the width and 4 seconds for the height:



Example



div
{
   
-webkit-transition: width 2s, height 4s; /*
Safari */
   
transition: width 2s, height 4s;
}

Try it Yourself »


Specify the Speed Curve of the Transition


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


The following example shows the some of the different speed curves that can be used:



Example



#div1 {transition-timing-function: linear;}
#div2
{transition-timing-function: ease;}
#div3 {transition-timing-function:
ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5
{transition-timing-function: ease-in-out;}

Try it Yourself »


Delay the Transition Effect


The transition-delay property specifies a delay (in seconds) for the transition effect.


The following example has a 1 second delay before starting:



Example



div {
    -webkit-transition-delay: 1s; /* Safari */
   
transition-delay: 1s;
}

Try it Yourself »


Transition + Transformation


The following example also adds a transformation to the transition effect:



Example



div {
    -webkit-transition: width 2s, height
2s, -webkit-transform 2s; /* Safari */
    transition:
width 2s, height 2s, transform 2s;
}

Try it Yourself »


More Transition Examples


The CSS transition properties can be specified one by one, like this:



Example



div
{
    transition-property: width;
   
transition-duration: 2s;
   
transition-timing-function: linear;
   
transition-delay: 1s;
}

Try it Yourself »

or by using the shorthand property transition:




Example



div
{
   
transition: width 2s linear 1s;
}

Try it Yourself »


Test Yourself with Exercises!



Exercise 1 » 
Exercise 2 » 
Exercise 3 » 
Exercise 4 » 
Exercise 5 »



CSS Transition Properties


The following table lists all the CSS transition properties:



























Property Description
transition A shorthand property for setting the four transition properties into a single property
transition-delay Specifies a delay (in seconds) for the transition effect
transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete
transition-property Specifies the name of the CSS property the transition effect is for
transition-timing-function Specifies the speed curve of the transition effect



❮ Previous
Next ❯

-

Popular posts from this blog

Colors HSL

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); Colors HSL ❮ Previous Next ❯ HSL Calculator   rgb(255, 0, 0) #ff0000 H: S: L: HSL Colors HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+. HSL stands for hue, saturation, and lightness. HSL color values are specified with: hsl( hue , saturation , lightness ) . Hue Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue. Saturation Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness Lightness is also a percentage; 0% is black, 100% is white. function submitOnEnter(e) { keyboardKey = e.which || e.keyCode; if (keyboardKey == 13) { setFullColor(); } } function clickHue(hue) { var h = document.getElementById("hue01"); h.v...
Read more

Google Hardware Icons

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); Google Hardware Icons ❮ Previous Next ❯ Hardware Icons Below is a list of all Google Hardware icons: Icon Description Example cast cast Try it cast_connected cast_connected Try it computer computer Try it desktop_mac desktop_mac Try it desktop_windows desktop_windows Try it developer_board developer_board Try it device_hub device_hub Try it devices_other devices_other Try it dock dock Try it gamepad gamepad Try it headset headset Try it headset_mic headset_mic Try it keyboard keyboard Try it keyboard_arrow_down keyboard_arrow_down Try it keyboard_arrow_left keyboard_arrow_left Try it keyboard_arrow_right keyboard_arrow_right Try it keyboard_arrow_up keyboard_arrow_up ...
Read more

SVG Filters

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> SVG Filters ❮ Previous Next ❯ SVG Filters SVG Filters are used to add special effects to SVG graphics. Browser Support The numbers in the table specify the first browser version that supports SVG filters.   SVG Filters 8.0 10.0 3.0 6.0 9.6 SVG Filter Elements In the next chapters, we will only demonstrate a touch of the filter effects that are possible - and give you an idea of what can be done with SVG. The available filter elements in SVG are: <feBlend> - filter for combining images <feColorMatrix> - filter for color transforms <feComponentTransfer> <feComposite> <feConvolveMatrix> <feDiffuseLighting> <feDisplacementMap> <feFlood> <feGaussianBlur> <feImage> <feMerge> <feMorphology> <feOffset> - filter for drop sh...
Read more