css-transitions

How do I normalize the CSS3 transition end events across browsers?

There’s a technique used in Modernizr, improved: function transitionEndEventName () { var i, undefined, el = document.createElement(‘div’), transitions = { ‘transition’:’transitionend’, ‘OTransition’:’otransitionend’, // oTransitionEnd in very old Opera ‘MozTransition’:’transitionend’, ‘WebkitTransition’:’webkitTransitionEnd’ }; for (i in transitions) { if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) { return transitions[i]; } } //TODO: throw ‘TransitionEnd event is not supported in … Read more

CSS 3 slide-in from left transition

You can use CSS3 transitions or maybe CSS3 animations to slide in an element. For browser support: http://caniuse.com/ I made two quick examples just to show you how I mean. CSS transition (on hover) Demo One Relevant Code .wrapper:hover #slide { transition: 1s; left: 0; } In this case, Im just transitioning the position from … Read more

How to use jQuery to wait for the end of CSS3 transitions?

For transitions you can use the following to detect the end of a transition via jQuery: $(“#someSelector”).bind(“transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd”, function(){ … }); Mozilla has an excellent reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Detecting_the_start_and_completion_of_a_transition For animations it’s very similar: $(“#someSelector”).bind(“animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd”, function(){ … }); Note that you can pass all of the browser prefixed event strings into the … Read more

CSS3 transition events

W3C CSS Transitions Draft The completion of a CSS Transition generates a corresponding DOM Event. An event is fired for each property that undergoes a transition. This allows a content developer to perform actions that synchronize with the completion of a transition. Webkit To determine when a transition completes, set a JavaScript event listener function … Read more