css-transitions

I try to make an animation with webkit-animation and @-webkit-keyframes. I have a div animated with child div inside. And i would stop the webkit-animation of the parent when my mouse is over a child. Any Examples ? Thanks methodofaction Unfortunately there is no parent selector in CSS, see here . You will have to use a bit of javascript to select the parent and tell it to pause. The pause declaration in CSS goes like this: -webkit-animation-play-state: paused | running; The javascript (jQuery, in this case) would look something like this: $(".child").hover( function(){ $(this).parent().css("

Showing then hiding animated indicator / spinner gifs are a good way to show a user that their action has worked and that something is happening while they wait for their action to complete - for example, if the action requires loading some data from a server(s) via AJAX. My problem is, if the cause of the slowdown is a processor -intensive function, the gif freezes. In most browsers, the GIF stops animating while the processor-hungry function executes . To a user, this looks like something has crashed or malfunctioned, when actually it's working. JSBIN example Note: the "This is slow" button

I have a question regarding the CSS vendor prefixes for transition. This source states that "you need to use all the usual prefixes to make this work in all browsers (-o-, -webkit-, -moz-, -ms-)". That page only shows the -webkit- and -moz- prefixes and claims that IE 10+, FF 16+ and Opera 12.1+ can read the prefix free version. In the code of Twitter Bootstrap, there is always exists a -webkit- , -moz- and -o- prefixed version in addition to the un-prefixed version. What prefixes should I use? http://caniuse.com/#search=transition says that you need -webkit- and plain property for modern

I am trying to apply a delay before starting a CSS transition on mouse out event. My CSS code is below, please let me know how to apply time delay before CSS transition on mouse out starts. I want to achieve that the menu stays stable for some time (e.g. for 3 seconds) after the user moves mouse pointer out of the menu. .timnav li .dropdown { width: auto; min-width: 0px; max-width: 230px; height: 0; position: absolute; overflow: hidden; z-index: 999; background:rgba(255, 255, 255, 0.8); } .timnav li:hover .dropdown { min-height: 60px; max-height: 500px; height: auto; width: 100%; padding: 0;

Is there a way to animate display:none to display:block using CSS so that the hidden div slides down instead of abruptly appearing, or should I go about this a different way? HTML: <div id="box"> Initial Content <div class="hidden"> This is hidden content </div> </div> CSS: #box { height:auto; background:#000; color:#fff; cursor:pointer; } .hidden { height:200px; display:none; } .hidden.open { display:block; } And here is my script: $(document).ready(function() { $('#box').click(function() { $(this).find(".hidden").toggleClass('open'); }); }); And a JSFiddle sinisake Yes, there is a way: http:

Is there a way to use -webkit-transition with display ? I'm using CSS display to hide and show a navigations second level … but only display: none and display: block on :hover is a little un-sexy… a ease would be great (like -webkit-transition: display 300ms ease-in; ) I know that's fairly easy to do this with jQuery, but I'm currently trying to setup everything with CSS3 (i know: not all browsers do support it, but that's irrelevant for this one project I'm currently working on) here's some code & structure: (the li.menu1 has a :hover with section.nav-menu1 {display: block;} ) <ul> <li class=