css-transitions

I want to use a transform for both scale and translateX , but each with a different timing function. Currently I have it working with absolute positioning instead of translateX , as follows: transition: transform 500ms cubic-bezier(0.390, -0.600, 1.000, -0.600), left 500ms cubic-bezier(0.270, 0.875, 0.575, 0.870); . left: -50px ; transform: scale(2,2) ; How would you rewrite this to achieve the same, but use translateX instead of left ? In this case, I would probably use a wrapper and transition one of the two transforms for the wrapper and the other one for the element itself. demo HTML: <div

I'm developing a website using bootstrap and its responsive JS+CSS. At the top of the page I have a fixed navigation bar where an "expand menu" button is shown in case the viewport is too tight. This button does its magic with an animation (a CSS3 one I think) and I'm happy with it, but I would like to do something more (toggle classes with jquery) each time the animation finishes (both the open animation and the close one). I was thinking about a javascript listener (even better by defining it thanks to jquery .on function), but I really don't know what event I should listen to! Any ideas?

Trying to get font-weight to gracefully transition from '400' to '600' using CSS but it doesn't appear to be working in Chrome. Is this a known bug or am I doing something wrong? Check the Fiddle here for an example The problem is that font weights, when represented numerically, must be a multiple of 100. To animate between 400 and 600, the font would change from 400 to 500 to 600 (3 'frames', if you like) and wouldn't look very smooth. An animation wouldn't increment the weight by 1 each time (400, 401, 402...) it would increment the weight by 100 (400, 500, 600). If your animation lasted 2

Can't seem to animate pseudo elements with -webkit-transition. The fiddle below shows what I mean when run in Chrome/Safari, I guess this isn't supported right now? http://jsfiddle.net/4rnsx/130/ Fixed in Google Chrome on January 3rd, 2013. By now (I do update this list) it's supported in: FireFox 4.0 and above Chrome 26 and above IE 10 and above Waiting for Safari and Chrome for Android to pull these updates. You can test it yourself in your browser , or See the browser support table . Well, actually, you can. You just need to leverage the often forgotten inherit value. Unfortunately we can't

Take a look at the following test in a desktop browser ( JSFiddle ): a { background: gray; display: block; margin: 100px; padding: 100px; } a span { opacity: 0; -webkit-transition: 0.5s; visibility: hidden; } a:hover span { opacity: 1; -webkit-transition: 0.5s; visibility: visible; } <a href="#">a <span>span</span></a> You hover over the anchor element and the span element fades in like it should. Now take a look via an iOS device. Result: it does nothing. Facts: If the transition property is absent, it works. If either the opacity or visibility property is absent, it works. There is no

I have a situation which only occurs on IE11. Chrome, Firefox, Safari (tablet and phone) all work as expected. I have created a transition for a panel(DIV) that slides in/out from the side. On pageload it should NOT "animate" but snap into the appropriate position. But on IE11 when the page loads the transition is "played" ONLY if there is a media query involved with that element matching the highest level of CSS specificity for the selector. The strange thing is that the media query is not even appropriate (should never be applied when the page is loaded in my test) . The following simple