css-transitions

So, I understand how to perform both CSS3 transitions and animations. What is not clear, and I've googled, is when to use which. For example, if I want to make a ball bounce, it is clear that animation is the way to go. I could provide keyframes and the browser would do the intermediates frames and I'll have a nice animation going. However, there are cases when a said effect can be achieved either way. A simple and common example would be implement the facebook style sliding drawer menu: This effect can be achieved through transitions like so: .sf-page { -webkit-transition: -webkit-transform

Is it possible to get/set the current animation percentage of a CSS3 @keyframes animation using javascript, jQuery, or some other means? Say for example there is a div with class called .spin that simply spins around in a circle using a keyframe also called spin . I have tried to get the current percentage value of the animation using $('.spin').css('animation') , $('.spin').css('animation: spin') , and a couple other ways, but they all alert empty I'm also interested in changing the original animation at each predefined keyframe % and I have tried things like $('.spin').css('animation', '.

As the title implies, is there a proper way to set some initial CSS properties (or class) and tell the browser to transition these to another value? For example ( fiddle ): var el = document.querySelector('div'), st = el.style; st.opacity = 0; st.transition = 'opacity 2s'; st.opacity = 1; This will not animate the opacity of the element in Chrome 29/Firefox 23. This is because ( source ): [...] you’ll find that if you apply both sets of properties, one immediately after the other, then the browser tries to optimize the property changes, ignoring your initial properties and preventing a

Just like http://twitter.github.com/bootstrap , The site what I working on now is responsive. I would like to remove transition animation when I click the collapsed navbar menu button. Above picture is the screenshot of what I'm asking. At TOP-RIGHT-CORNER , there is a three-lined menu button. Bootstrap accomplishes the transition animation of the responsive nav bar the same way it does any collapse, which is using a CSS3 transition. To turn off the transition for only the navbar (leaving any other transitions in place), you simply have to override the CSS. I'd suggest adding a class, such as

http://jsfiddle.net/nicktheandroid/tVHYg/ When hovering .wrapper , it's child element .contents should animate from 0px to it's natural width. Then when the mouse is removed from .wrapper , it should animate back down to 0px . The .wrapper element should only be as wide as it needs to be (allowing .contents to grow), so .wrapper should grow in width and shrink in width as .contents does. There should be no set width for .contents . I'm using CSS3, but it could be accomplished in jQuery, that would be fine. The problem: See the JSfiddle .wrapper is not only as wide as it needs to be. when