css-transitions

Is it possible to animate elements move with css3 transitions after hiding some element using jQuery's .fadeOut() ? I found some kind of solution here (see "It works for grids, too" section): However my case is more like this: http://jsfiddle.net/CUzNx/5/ <div class="container"> <div id="item1" class="item">Test1</div> <div id="item2" class="item">Test2</div> <div id="item3" class="item">Test3</div> <div id="item4" class="item">Test4</div> <div id="item5" class="item">Test5</div> <div id="item6" class="item">Test6</div> <div id="item7" class="item">Test7</div> </div> <div style="clear:both">

I'm creating a link list where one link container expands when hovering it ( with details, image and description). I have no problems to animate it with css transitions or animations. The problem is that I would like it to stay expanded even after the mouse moves away. And I would like to do it without javascript. Is that possible? Thanks! No it's not possible because every css that will be applied on mouseover ( :hover ) will be removed on mouseout and there is no other way to capture mouseover and out. #animate:hover { /* ex. -webkit- -moz- -ms- -o-​ */ animation: animation 2s infinite; /*

I have a bunch of tiles on a page that expand as the user mouses over them. The expanded one should have the highest z-index , and this works, but I need the z-index to remain until the size transition is complete. Is there a way to do this using CSS only, no JavaScript ? Since I'm using transitions, I'm not too worried about compatibility here, I applied progressive enhancement correctly. Here's a jsFiddle that demonstrates this. Mouse over A; it transitions out. Mouse off of it, however, and it falls behind B. I need it to stay in front of B until the transition completes. Is there an

I am developping a web application that needs to generate and compute a bunch of arrays at startup. I would like to show a loading page while this occurs, and maybe play a little with css animations, but it seems that CSS animations will hang while javascript is executed. I already have a loading bar that is updated on key events of the processing, but I would like to use css-transitions to smooth it a bit. I was wondering if there is any way to let something animate while the javascript is executing? I know I can manage to give back control to the browser from time to time to let it refresh,

Question: Is it even possible to do two different transforms on an element and have them transition at different speeds? Example without transforms ( Fiddle ): div { width: 100px; height: 100px; background: red; transition: width 1s linear, height 2s linear; } div:hover { width: 200px; height: 400px; } Notice how it takes 1 second for the width to expand to 200px, and 2 seconds for the height to expand to 400px. Example with transforms ( Fiddle ): div { width: 100px; height: 100px; background: red; transition: transform 1s linear, transform 2s linear; } div:hover { transform: scale(1.5);

Whenever I seem to apply some code to let's say move a div for example using the latest iOS Safari browser it doesn't actually transition between the two rules set. I have tried changing to use other than percentage values but still to this day, I have never been able to get it to work when I use transition: transform; for any translate property applied. I'm using the correct prefixes and checked support and should be working no problem. http://caniuse.com/#search=transition http://caniuse.com/#search=translate JSFiddle $('button').on('click', function() { $('.mydiv').toggleClass('added-class'