css-transitions

I am using CSS3 transform on a background image to enlarge on hover. I have tested in the latest browsers of Opera, Safari and Firefox and work nice and smooth, however in Chrome the transition is very jerky. Heres is the link, hover over the social icons to see what I mean.. http://www.media-flare.com/pins/ - I have noticed as you resize the browser down to mobile view, it gets worse. I have done a jsfiddle version here and slowed down the transition as it is harder to see. http://jsfiddle.net/wsgfz/1/ - This seems jerky in chrome and firefox, smooth in safari and opera. Is there anything I

Google is failing me somewhat on this (I think because the terminology for PolyFill/Shim/Spackle is new and diverse at the moment). I'm trying to find a good JavaScript PolyFill or Shim for webkit's (and now as of the RC FireFox 4's) CSS transitions. I have found this work that Weston Ruter did, but it hasn't been updated in a while, and uses browser detection as opposed to feature detection. I also uncovered FakeSmile but it is geared mostly to SVG animation. Does anyone know of any good libraries to fill in this functionality? Preferably something that would work with Modernizr and is still

I want to animate the appearance and disappearance of table rows. First of all I tried using a CSS transition , but it did nothing due to the change of the display property. So I used an animation , which works as expected. The problem is, the full height of the row is reserved when the animation begins . See the snippet below for an illustration of the problem: Row 3 is pushed down straight away, before the animation begins. How can I animate the height of the row progressively, so that it only takes as much space as needed? And as a bonus: it should not require a fixed height for rows it

Is it at all possible with current CSS3 to translate an object (specifically a DIV) along an arc or curve? Here's an image to help illustrate. kizu You can use nested elements and make the wrapper and inner element rotate in opposite directions so that the rotation of the inner element compensates for the rotation of the wrapper. If you don't need to keep the nested element horizontal, you can omit the inner rotation. Here is a Dabblet . Stack Snippet: /* Arc movement */ .wrapper { width: 500px; margin: 300px 0 0; transition: all 1s; transform-origin: 50% 50%; } .inner { display: inline-block;

How can one make the font size grow bigger on mouse over? Color transitions work fine over time, but the font size switches immediately for some reason. Sample code: body p { font-size: 12px; color: #0F9; transition:font-size 12s; -moz-transition:font-size 12s; /* Firefox 4 */ -webkit-transition:font-size 12s; /* Safari and Chrome */ -o-transition:font-size 12s; transition:color 12s; -moz-transition:color 12s; /* Firefox 4 */ -webkit-transition:color 12s; /* Safari and Chrome */ -o-transition:color 12s; } p:hover { font-size: 40px; color:#FC0; } The color transitions fine over time, but the

I'd like to apply a CSS transition to all properties apart from background-position. I tried to do it this way: .csstransitions a { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .csstransitions a { -webkit-transition: background-position 0s ease 0s; -moz-transition: background-position 0s ease 0s; -o-transition: background-position 0s ease 0s; -ms-transition: background-position 0s ease 0s; transition: background-position 0s ease 0s; } First I set all properties to transition and then

Is it possible to use CSS3 transitions with a different delay switching between "states"? For example, I'm trying to make an element immediately higher upon hover then on 'mouseout' to wait a second before sliding back to the element's initial height. Demo page: jsfiddle.net/RTj9K (hover black box in top-right corner) CSS: #bar { transition:.4s ease-out 0, 1s; } I thought the timings on the end related to delay but it doesn't seem to be working the way I'd imagined. If you want different CSS transition delays on hover and mouseout , you have to set them using the relevant selectors. In the

I'm including an SVG image file on my page within an object tag, like this: <object type="image/svg+xml" data="linkto/image.svg"> <!-- fallback image in CSS --> </object> The image in question is a world map, i want to transition the fill property when the mouse hovers over a group , in this case I've grouped my SVG by continent, so South America looks something like this: <g id="south_america"> <path fill="#FAFAFA" d="(edited for brevity)"/> </g> I can get the fill property to change on hover by using the following CSS at the top of my SVG document: <style> #south_america path { transition: