css-transitions

Here's what I want to achieve: When an HTML link is clicked, I want to animate it before leaving the page If the link is opened in a new window/tab, the animation should not take place How on earth do I achieve this? You could use javascript $(function(){ $(".btn").bind("click",function(){ $(this).animate({'left': '100px'}, 100, function(){ window.location.href = index.html }) }) }) But you'll have to stop the default action if your button is a link. You'll need to capture the click event, prevent the default action, do the animation, then load the new page. If using jquery (Available as a

I have been playing around with looping of CSS transitions (following this article ). The transition itself could be divided into 4 (looped) phases: shrinked2=>expanded=>expanded2=>shrinked These states are represented by 4 classes: shrinked2 - stateOne expanded - stateTwo expanded2 - stateThree shrinked2 - stateFour I am, initially, setting the width and height of my element, being transitioned, in percents via id. Then, to trigger transition, I am changing transform: scale via state classes, listed above. Up to his point it basically works fine for me, here is demonstration on JSFiddle . Now

I was able to transition text-align from center to left . With this code, if you run it, then hover over, you'll see the top one goes to the left. However the bottom overflows on the right ; how can I figure out how to make the transition to right not overflow? Note: This is a demo of my real application, which has strings/elements of unknown/variable width, from 1 to anything to fill a single line (no wrapping). .header { position: fixed; width: 70%; background-color: springgreen; } .title { text-align: center; } .menu { text-align: center; } .trans-left { transition: margin-right 1s; }

I'm trying to build a dropdown menu where first the dropdown slides down, then one-by-one menu items appear from the bottom. On hover, it looks good but I don't know how to play it smoothly on hover off. What I'm trying to do is hide the second sub-menu item first, then the first submenu item, then the dropdown slides up. What I tried is to add the hide animation keyframes with a delay by default to the dropdown, and add the show animation on hover with 0 delay. But its not working properly as you can see.(and it will animate on page load too, which is not good for me) ul li ul { -webkit

I couldn't find an answer to this anywhere, probably because it doesn't exist, but anyway: Rather than defining "transition-property: transform", is it possible to define transitions for translation and scale independently? Right now I got the following definition: .logo { position: absolute; -webkit-transition: -webkit-transform 1s ease-out; } This way, when I set "-webkit-transform" to "scale($s) translate3D($x,$y,$z)" (with $s etc. being arbitrary values) both are animated, but I only want the scale to be... Thanks for any hints in advance! The hacky way to solve this is to use a wrapper