css-transitions

Is there a way that I can do the following? I have a transparent png sprite that shows a standard picture on the left, and a picture for the :hover state on the right. Is there a way that I can have the image fade from the left image into the right image on :hover using only css3 transitions? I've tried the following, but it doesn't work: li{-webkit-transition:all 0.5s linear; -moz-transition:all 0.5s linear; -o-transition:all 0.5s linear; transition:all 0.5s linear;} li{background:url(/img/sprites.png) 0 -50px no-repeat;} li:hover{background:url(/img/sprites.png) 0 -150px no-repeat;} Now, the

I have a wee problem concerning my images, as shown here ( http://jsfiddle.net/garethweaver/Y4Buy/1/ ). .img-blur:hover { -webkit-filter: blur(4px); transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; -ms-transition: all 0.35s ease-in-out; } <img src="http://i.imgur.com/Vp5StNs.png" class="img-blur"> The image blurs when the mouse hovers but when I take my mouse off it goes straight back to normal, how can I make it ease out of the blur? Also, is there a way to show text when the mouse

I am implementing a CSS3 transition effect on a article element but the event listener transitionend works only in pure JavaScript, not with jQuery. See example below: // this works this.parentNode.addEventListener( 'transitionend', function() {alert("1"); }, true); // this does not work $(this).parent().addEventListener( 'transitionend', function() {alert("1"); }, true); Can somebody explain me what am I doing wrong? in jQuery you should use bind() or on() method: $(this).parent().bind( 'transitionend', function() {alert("1"); }); graygilmore Also take note that if you are running multiple

I have an image, when i blur it on hover, it slightly moves, it's like the image shakes in its position, problem only occurs in chrome ( tested with: chromium 63 linux-x86_64 ), .item img{ transition: 250ms all ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .item:hover img{ filter: blur(2px) } I thaught it might be related to this issue , but none of the solutions worked. UPDATE : As @Chase said , this is a chrome bug and the most stable solution is to wait for it to be fixed. but for now, the best solution for this issue is @kosh Very's answer This is a

What would be the right way to prefix this CSS in order to cover the widest range of browsers and versions? Version 1: -webkit-transition: -webkit-transform .3s ease-in-out; -moz-transition: -moz-transform .3s ease-in-out; -ms-transition: -ms-transform .3s ease-in-out; -o-transition: -o-transform .3s ease-in-out; transition: transform .3s ease-in-out; -webkit-transform: rotateX(-30deg); -moz-transform: rotateX(-30deg); -ms-transform: rotateX(-30deg); -o-transform: rotateX(-30deg); transform: rotateX(-30deg); Or version 2: -webkit-transition: transform .3s ease-in-out; -moz-transition:

Short and sweet version: Is it possible to combine position: relative and position: absolute with smooth CSS-transitions? Verbose version: I'm creating a small widget (I call it a Deck), which I wan't to be able to have a collapsed and expanded state. All well so far, this is working fine. Switching between the two states, naturally warrants a transition animation. This is working too, but not the way I would like it to be realized. What I would like to do, is use CSS-transitioning, instead of using absolute positioning using JavaScript, like I am now. Alas, the current scenario is, in