Dev Stack Source

Answer : Here's one way to achieve this (put a bogus property none for transition property in :hover ): #inner2{ opacity:0; transition:opacity 2000ms; } #outer:hover #inner2{ opacity:1; transition:none; } http://jsfiddle.net/j716sbav/4/ Answer updated to incorporate @BoltClock's suggestion. Putting none instead of a bogus property is definitely more elegant. If you prefer not to specify the transition property more than once, you can apply the transition to :not(:hover) , but the caveat is that you need to swap all of the other declarations as well: #inner2{ opacity:1; } #outer:not(:hover) #inner2{ opacity:0; transition:opacity 2000ms; } Either of these will work, but if you don't want to deal with confusing inversions, stick with overriding via transition: none . Also note that CSS selectors represent states and not events, which means that it utilizes a :hover state rather than mouseover and mouseout events; however, a tra...

Answer : You're applying transitions only to the :hover pseudo-class, and not to the element itself. .item { height:200px; width:200px; background:red; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } .item:hover { zoom: 1; filter: alpha(opacity=50); opacity: 0.5; } Demo: http://jsfiddle.net/7uR8z/6/ If you don't want the transition to affect the mouse-over event, but only mouse-out , you can turn transitions off for the :hover state : .item:hover { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; zoom: 1; filter: alpha(opacity=50); opacity: 0.5; } Demo: http://jsfiddle.net/7uR8z/3/

Answer : Use css @keyframes .elementToFadeInAndOut { opacity: 1; animation: fade 2s linear; } @keyframes fade { 0%,100% { opacity: 0 } 50% { opacity: 1 } } here is a DEMO .elementToFadeInAndOut { width:200px; height: 200px; background: red; -webkit-animation: fadeinout 4s linear forwards; animation: fadeinout 4s linear forwards; } @-webkit-keyframes fadeinout { 0%,100% { opacity: 0; } 50% { opacity: 1; } } @keyframes fadeinout { 0%,100% { opacity: 0; } 50% { opacity: 1; } } <div class=elementToFadeInAndOut></div> Reading: Using CSS animations You can clean the code by doing this: .elementToFadeInAndOut { width:200px; height: 200px; background: red; -webkit-animation: fadeinout 4s linear forwards; animation: fadeinout 4s linear forwards; opacity: 0; } @-webkit-keyframes fadeinout { 50% { opacity: 1; } } @keyframes fadeinout { 50% { opacity: 1; } } <div class=elementToFadeInAndOut></div> If you...

Answer : Try setting a default value in the css (to let it know where you want it to start out) CSS position: relative; transition: all 2s ease 0s; top: 0; /* start out at position 0 */ Perhaps you need to specify a top value in your css rule set, so that it will know what value to animate from . In my case div position was fixed , adding left position was not enough it started working only after adding display block left:0; display:block;

Answer : transition and transform are separate CSS properties, but you can supply transform to transition to "animate" a transformation. transition The CSS transition property listens for changes to specified properties (background-color, width, height, etc.) over time. transition Property Syntax: selector { transtion: [property-name] [duration] [timing-function] [delay] } For example, the below styles will change the color of a div's background to orange over a period of 1 second upon hover. div { width: 100px; height: 100px; background-color: yellow; transition: background-color 1s; /* timing function and delay not specified */ } div:hover { background-color: orange; } <div></div> transform The CSS transform property rotates/scales/skews an element over the X,Y, or Z axes. Its behavior does not relate to transition . Simply put, on page load, the element will just appear rotated/skewed/scaled. Now if you wanted the rotating/skewing/...

Answer : Syntax: transition: <property> || <duration> || <timing-function> || <delay> [, ...]; Note that the duration must come before the delay, if the latter is specified. Individual transitions combined in shorthand declarations: -webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s; -moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s; -o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s; transition: height 0.3s ease-out, opacity 0.3s ease 0.5s; Or just transition them all: -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; Here is a straightforward example. Here is another one with the delay property. Edit: previously listed here were the compatibilities and known issues regarding transition . Removed for readability. Bottom-line: just use it. The nature of this property is non-breaking for all applications and compatibility is now well ab...