Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Example usage of a cross-browser ontransitionend event (CSS transition)
<!doctype html>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
<style type="text/css" media="screen">
div {
background-color: red;
width: 10em;
height: 10em;
margin: 0 auto;
opacity: 1;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
transition: opacity 1s linear;
div:hover {
opacity: 0;
html {
-webkit-user-select: none;
<div id="demo">Mouseover me!</div>
<script type="text/javascript" charset="utf-8">
var myDiv, transition;
myDiv = document.getElementById('demo');
// working demo at
var myDiv, transition;
myDiv = document.getElementById('demo');
if('ontransitionend' in window) {
// Firefox
transition = 'transitionend';
} else if('onwebkittransitionend' in window) {
// Chrome/Saf (+ Mobile Saf)/Android
transition = 'webkitTransitionEnd';
} else if('onotransitionend' in myDiv || navigator.appName == 'Opera') {
// Opera
// As of Opera 10.61, there is no "onotransitionend" property added to DOM elements,
// so it will always use the navigator.appName fallback
transition = 'oTransitionEnd';
} else {
// IE - not implemented (even in IE9) :(
transition = false;
// Example usage
myDiv.addEventListener(transition, function(){
//alert( + ' transition end!');
}, false);
// hover replacement for touch devices
if('ontouchstart' in window) {
myDiv.addEventListener('touchstart', function(){ = 0;
}, false);
myDiv.addEventListener('touchend', function(){ = 1;
}, false);

This seems to fail in Firefox Nightly.

('ontransitionend' in window) is false in Firefox 28.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment