transition

property is a shorthand property used to represent up to four transition-related longhand properties:

These transition properties allow elements to change values over a specified duration, animating the property changes, rather than having them occur immediately. Here is a simple example that transitions the background color of adivelement on :hover:

That div will take half a second when the mouse is over it to turn from red to green. Here is a live demonstration of such a transition:

See the PenTransition Demoby Louis Lazaris (@impressivewebs) onCodePen.

You can specify a particular property as we have above, or use a value of all to refer to transition properties.

In this above example, both background and padding will transition, due to the value all specified for thetransition-propertyportion of the shorthand.

You may comma separate value sets to do different transitions on different properties:

For the most part, the order of the values does not matter — unless a delay is specified. If you specify a delay, you must first specify a duration. The first value that the browser recognizes as a valid time value will always represent the duration. Any subsequent valid time value will be parsed as the delay.

Some properties cannot be transitioned because they are not animatable properties. See the spec for a full list ofwhich properties are animatable.

By specifying the transition on the element itself, you define the transition to occur in both directions. That is, when the styles are changed (e.g. on hover on), they properties will transition, and when the styles change back (e.g. on hover off) they will transition. For example, the following demo transitions on hover, but not on hover off:

See the Penzohgtby Louis Lazaris (@impressivewebs) onCodePen.

This happens because the transition has been moved to the:hoverstate selector and there is no matching transition on the selector that targets the element directly without the:hoverstate.

For compatibility in all supporting browsers, vendor prefixes are required, with the standard syntax declared last:

.example -webkit-transition: background-color 500ms ease-out 1s; -moz-transition: background-color 500ms ease-out 1s; -o-transition: background-color 500ms ease-out 1s; transition: background-color 500ms ease-out 1s;

IE10 (the first stable version of IE to supporttransition) does not require the-ms-prefix.

All you need to know about CSS Transitions(Alex MacCaw)

Using CSS3 transitions: A comprehensive guide(Adobe)

Different Transitions for Hover On / Hover Off

This browser support data is fromCaniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Thanks for all the goodies, ChrisI return to the site often for so many great tips and, well, tricks.

Thanks for this Chris. Your link to Adobes comprehensive guide tries to go to a subdirectory of your site. Might want to fix it.

Hi guys. This didnt work for me in Firefox when using div image backgrounds. It works fine on Webkit browsers though. Any ideas?

HJ, do you have the -moz-transition: in your CSS? Just making sure And what version of FF? What OS?

Hi HJ, yes i do have the -moz-transition. Im running Firfox 23.0.1 and Mac OS X Mavericks.

I can confirm this. For some reason Firefox in OS X will apply both transitions on the hover over and hover out states, even when there is no transition information in the hover state.

This didnt work while changing css3 background gradients and background images as well. How do i fix that? Please help me.

.header_menu ul li background:url(../images/menu_bg.png) left center no-repeat; width:auto .header_menu ul li a:hoverbackground:url(../images/menu_bg_hover.png) repeat-x; -webkit-transition: background 3s ease; -moz-transition: background 3s ease; transition: background 3s ease;

It looks like youre using two separate elements the first line targets the LI while the second targets the A:HOVER

` .header_menu ul li a background:url(../images/menu_bg.png) left center no-repeat; width:auto; -webkit-transition: background 3s ease; -moz-transition: background 3s ease; transition: background 3s ease; .header_menu ul li a:hover background:url(../images/menu_bg_hover.png) repeat-x; `

Although Im not sure how the change between non repeating and repeating backgrounds will be handled.

background-image 3s ease;

Yeah, linear gradientdoes not workfor me either

I found the tutorial useful and used some of the technique in my own website. Thanks.

This is very good article for freshers

Hi, I have a problem! The css works, but unlike the examples Ive seen, mine automatically plays when the page loads:

box /*usual properties go here*/ box-shadow: 20px 20px 6px 000000; -webkit-transition: box-shadow 0.5s 0s ease; transition: box-shadow 0.5s 0s ease; box:hover box-shadow: 20px 20px 6px 000088;

The problem here is that when the page loads, it does an animation from no shadow to shadow, and then on hover does what it has to (black to blue sh.). Is there any way to disable the first animation?

/*usual properties go here*/ box-shadow: 20px 20px 6px 000000; -webkit-transition: box-shadow 0.5s 0s ease**-in**; transition: box-shadow 0.5s 0s ease**-in**;

I think you need the -in or -out portion for the easing, no?

I think you need the -in or -out portion for the easing, no?

Nope, ease, ease-in, ease-out and ease-in-out are four different properties, and they cannot be the attribute of box-shadow.

Oops, I meant it would only go to the transition attribute. Not on the box-shadow. So you dont want the effect when the page loads, then remove the transition from box to box:hover. Unless I am missing something.

Do you have a link to a page we could see?

Okay, I got it, some of the elements in form was conflicting, like input type=email, and it caused a it to render improperly. I dunno why maybe just html5 bugs.

Oh, okay, now its working fine. Because I removed the border-image property O.O. I have no idea why XD.

Oh, wait no. Not that property. The original still doesn work properly, but I made an other copy of the css and the index file, where I only included that div element and its formatting in the css, and it worked fine. So it must be conflicting with other elements, so I guess I cant get more help :/.

Hi guys. My transitions work fine in IE and Chrome but not FF. I am running 28.0, OS Mavericks.

I borrowed this code from I cant get it to work in FF. IE & Chrome all good.

-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.75);

-webkit-animation: wipe 6s infinite; -webkit-animation-delay: 3s; -webkit-animation-direction: alternate; -webkit-mask-size: 2000px 2000 -webkit-mask-image: -webkit-gradient(linear, left top, right bottom, color-stop(0.00, rgba(0,0,0,1)), color-stop(0.45, rgba(0,0,0,1)), color-stop(0.50, rgba(0,0,0,0)), color-stop(0.55, rgba(0,0,0,0)), color-stop(1.00, rgba(0,0,0,0)));

-webkit-mask-position: -1000px -1000

-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.75);

-webkit-transition: -webkit-mask-position 1s ease; -webkit-mask-size: 600px 600 -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(0.00, rgba(0,0,0,1)), color-stop(0.35, rgba(0,0,0,1)), color-stop(0.50, rgba(0,0,0,0)), color-stop(0.75, rgba(0,0,0,0)), color-stop(1.00, rgba(0,0,0,0)));

-webkit-mask-position: -300px -300

prefix -moz- to all your css3 codes and make another set of it as -webkit- is added

-webkit-mask-position: -1000px -1000

-moz-mask-position: -1000px -1000

Would you please let me know how to change therotateXto simple sliding effect, in this javascript code.

jQuery(.portfolio-item .portfolio-media-wrapper.gdl-image).hover(function() if (jQuery.support.transition) jQuery(this).children(a.hover-wrapper).transition( opacity: 0, rotateX: 180deg, duration: 0); jQuery(this).children(a.hover-wrapper).transi
tion( opacity: 1, rotateX: 0deg ); else jQuery(this).children(a.hover-wrapper).animate( opacity: 1 ); , function() if (jQuery.support.transition) jQuery(this).children(a.hover-wrapper).transition( opacity: 0, rotateX: 180deg ); else jQuery(this).children(a.hover-wrapper).animate( opacity: 0 ); );

thank you i love css3 and i like the tutoriel (y)

So, Ive yet to see this really documented anywhere however extremely useful in my opinion..

As Im sure many others agree, being confined to transitions being triggered via hovering, can be quite a pain, and leaving this awesome feature nearly USELESS at times! (and then forcing the use of javascript in cases we should NOT have to) ..

HOWEVER, Ive just discovered by tinkering around with STYLE ELEMENTs MEDIA Attribute in combination with CSS3s transition effects, we are VERY MUCH ABLE to trigger the transitions via a LIST of other events, WITHOUT the alternate use of ANY javascript/jquery what-so-ever for animations/fades/element-moving on window-resize, etc!

(ex: [ STYLE MEDIA=all and (min-width: 600px) ] )

Leaving us actually quite a large number of new options, such as screen orientation: landscape/portrait; useful for mobile devices, etc! find the full list on w3schools!

I thought this was pretty awesome myself thought Id share.

Im sure Chris already new of this though(lol) Hes always had everything rearranging quite nicely upon window shrinking etc (although I never actually LOOKED at the code to be POSITIVE if this IS actually his method or not; but it definitely seems like it couldve been, as the transitions are equally as smooth, etc..however, I must say, now that I just checked, the OLD css-tricks design USED-TO demonstrate this MUCH more than it does currently).

Can we change the text color on page load without mouse hover. Just like a gif animation?

yes you can by using @keyframes rule. please read practice examples.

Nice article. Please write about transitions using svg. You can check the thumbnails at this3D printer site

-webkit-transform: translate(-50%, -50%);

-moz-transform: translate(-50%, -50%);

-webkit-transition: fill 1.5s, stroke-dasharray .75s, stroke-opacity 1.5s ease;

-moz-transition: fill 1.5s, stroke-dasharray .75s, stroke-opacity 1.5s ease;

-ms-transition: fill 1.5s, stroke-dasharray .75s, stroke-opacity 1.5s ease;

-o-transition: fill 1.5s, stroke-dasharray .75s, stroke-opacity 1.5s ease;

transition: fill 1.5s, stroke-dasharray .75s, stroke-opacity 1.5s ease;

var url =/css/simpleline-icons.svg;

var c=new XMLHttpRequest(); c.open(GET, url, false); c.setRequestHeader(Content-Type, text/xml); c.send();

.my-gallery:hover .my-icon-gallery

Such a simple thing but it can make a huge difference to how a site feels.

For those who want their transition go from red to green through orange, Just set thebackground-colorusingHSL(Hue, Saturation, Lightness). For example :

To add a separate transitions to hover-over and hover-off, include the -off transition on the element style and the -on transition on the :hover style. I forked the CodePen above asan example.

I got a doubt. Can I add a overlay text when hovering my picture div?

-webkit-box-shadow: inset 0px 0px 5px 2px rgba(255,255,255,.75);

box-shadow: inset 0px 0px 5px 2px rgba(255,255,255,.75);

I am currently having an issue with the transitioning. I am not sure whether I have too many going on, or if I have missed something. The hover CSS and transition stuff is below. I am trying to get an image to, on hover, move to the left.

Seriulsly, thanks a lot. I was looking everywhere how to return to the normal state of a link whit the ease transition.

How I just zoom the image? Which transition I use?

Nice tutorial as usual, but I wanted to let you know that the red/green transition is not the best color choice. As you probably know red/green color blindness is quite common, and I personally cant see any change in color at all.

Whats the point of this transition effect if it doesnt work on iOs ?

This tutorial actually explained transitions better than w3schools and most of the tutorials out there that I visited to understand this concept.

Was having difficulties trying to animate background-color.

Aftering coming here and changed to just background and it worked!!

font-family: Helvetica Neue,Helvetica,Arial,sans-serif;

main1 margin-left:12%; float:left; clear:right; width:20%; text-align:center; main2 margin-left:12%; float:left; clear:right; width:20%; text-align:center; container height:200 width:200 clear:right; float:left; margin-left:10%; margin-right:10%; margin-top:1.5%; main:hover img -webkit-transition:all 1s ease-in-out; -webkit-transform:scale(1.4); main1:hover img -webkit-transition:all 1s ease-in-out; -webkit-transform:scale(1.4); transition:all 1s ease-in-out; -ms-transform:all 1s ease-in-out; main2:hover img -webkit-transition:all 1s ease-in-out; -webkit-transform:scale(1.4); transition:all 1s ease-in-out; transform:all 1s ease-in-out; .circle /*-webkit-border-radius:50%;*/ border-radius:50%; height:150 width:150 content margin-right:10%; /*margin-left:10%;*/ margin-top:1%; text-align:left; content:hover img -webkit-transition:all 1s ease-in-out; -webkit-transform:scale(1.4); transition:all 1s ease-in-out; -ms-transform:all 1s ease-in-out; content1 margin-right:10%; margin-top:1%; margin-left:10%; text-align:right; content1:hover img -webkit-transition:all 1s linear; -moz-transition: all 2s linear; -webkit-transform:scale(1.4); transition:all 1s linear; -ms-transform:all 1s linear; container1 height:200 width:200 clear:left; float:right; margin-left:10%; margin-right:10%; margin-top:1.5%; section1 margin-left:10% margin-right:10%; clear clear:both; header position:fixed; width:100%; padding:0 background-color:c0c0c0; opacity:.4; margin:0; p font-size:22 a text-decoration:none; footer margin-left:5%; margin-right:25%; font-size:20 table text-transform:uppercase; margin-left:20%; @media (min-width:300px) body width:99%;

in this after transition ends it jumps back can i end it slowly???

Hi all. Anybody know what is the default time of transition?

Or default time of responding on hover? Because a on my page wont respond on quick moving mouse. The question is how long mouse should hover before onhover fires?

You may write comments inMarkdown. This makes code easy to post, as you can write inline code like `div>

this/div>

` or multiline blocks of code in triple backtick fences (“`) with double new lines before and after.

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Feel free to use ourcontact form. Thats a great place to let us know about typos or anything off-topic.

CSS-Tricks* is created, written by, and maintained byChris Coyieranda teamof swell people. It is built onWordPress, hosted byMedia Temple, and the assets are served byMaxCDN. It is made possible throughsponsorshipsfrom products and services we like.

*May or may not contain any actual CSS or Tricks.