css-transitions

I'm building a simple pure-css 'card flip' animation, it has to work in IE10, but sadly what I've written doesn't. jsFiddle demo here or sample html zip here I can see that backside-visibility works in IE10 from their demo here so maybe I've just overlooked something stupid, maybe a fresh pair of eyes might help! Thanks in advance! Well some Microsoft IE devs saw my tweet and jumped in with a fix already! Apparently IE10 does not support preserve-3d, and they whipped up this jsFiddle demonstration Big thanks to @reybango and @sgalineau for the help - very much appreciated. redochka This seems

I am trying to change the background-color of an element on hover by using CSS transitions. I want to do this by having it scroll up from the bottom. I can fade the background in using this, but I would like it to slide up: -webkit-transition: background-color 0.5s linear; -moz-transition: background-color 0.5s linear; -o-transition: background-color 0.5s linear; transition: background-color 0.5s linear; One other thought, would it be better to scroll up a separate element with the background applied to it? In order to slide the background color up you would need to use a background image, or

Is it possible to transition text-alignment using css3? For example, I'd like to animate text-alignment from left to right, however, adding a transition property on text-align doesn't do the trick. http://codepen.io/anon/full/lGDwB Christoph Bühler I found out a way of not only animating from left to right / right to left, but also from centered text. The trick is to apply a width of '0'. ul { background: #fff; padding: 16px; border: 1px solid #e2e2e2; } li { list-style: none; letter-spacing: 1px; font: 12px 'Tahoma'; line-height: 24px; color: #444; text-align: center; white-space: nowrap;

I've started using transitions to "modernise" the feel of a site. So far, :hover transitions are working great. Now I'm wondering if it's possible to trigger a transition based on other things, such as when a class changes. Here's the relevant CSS: #myelem { opacity: 0; display: none; transition: opacity 0.4s ease-in, display 0.4s step-end; -ms-transition: opacity 0.4s ease-in, display 0.4s step-end; -moz-transition: opacity 0.4s ease-in, display 0.4s step-end; -webkit-transition: opacity 0.4s ease-in, display 0.4s step-end; } #myelem.show { display: block; opacity: 1; transition: opacity 0.4s

I'm having an issue in chrome with a css3 transform rotate transition. The transition is working fine but just after it finishes the element shifts by a pixel. The other strange thing is that it only happens when the page is centered ( margin:0 auto; ). The bug is still there if you remove the transition as well. You can see it happening here: http://jsfiddle.net/MfUMd/1/ HTML: <div class="wrap"> <img src="https://github.com/favicon.ico" class="target" alt="img"/> </div> <div class="wrap"> <div class="block"></div> </div> CSS: .wrap { margin:50px auto; width: 100px; } .block { width:30px;

I want to have a square image inside a circle. When the user hovers over the image, the image should scale (zoom in). The circle should remain the same size. Only during the CSS transition, the square image overlaps the circle (as if overflow:hidden weren't there at all). Here's a demo with the weird behavior in Chrome and Safari: http://codepen.io/jshawl/full/flbau Working ok in firefox. Aaron K I removed some superfluous markup (the circle and square containers... only needs one) and styled the img itself: #wrapper { width: 500px; height: 500px; border-radius: 50%; overflow: hidden; -webkit