DOM detection with CSS Animations and JavaScript

mutator.css

/* Add an animation to any file picker added to .photos-container */
.photos-container input[type="file"] {
    -ms-animation-duration: 0.001s;
    -ms-animation-name: chooserInserted;
  
    -moz-animation-duration: 0.001s;
    -moz-animation-name: chooserInserted;
  
    -webkit-animation-duration: 0.001s;
    -webkit-animation-name: chooserInserted;
  
    -o-animation-duration: 0.001s;
    -o-animation-name: chooserInserted;
  
    animation-duration: 0.001s;
    animation-name: chooserInserted;
}

/* Define the animation (short and sweet) */
@-ms-keyframes chooserInserted {  
    from { opacity: 0.99; }
    to { opacity: 1; }  
}

@-moz-keyframes chooserInserted {  
    from { opacity: 0.99; }
    to { opacity: 1; }  
}

@-webkit-keyframes chooserInserted {  
    from { opacity: 0.99; }
    to { opacity: 1; }  
}

@-o-keyframes chooserInserted {  
    from { opacity: 0.99; }
    to { opacity: 1; }  
}

@keyframes chooserInserted {  
    from { opacity: 0.99; }
    to { opacity: 1; }  
}

mutator.js

var animationComplete = function(event) {
    // Is new file picker inserted into .photos-container?
    if (event.animationName == "chooserInserted") {
        // Success! Carry on
    }
};

$(document).ready(function() {
    // Modified from: http://davidwalsh.name/detect-node-insertion
    // Listen up for animation changes in the document
    // When heard, call the `addNewFileChooser` function
    document.addEventListener("animationstart", animationComplete); // standard + firefox
    document.addEventListener("MSAnimationStart", animationComplete); // IE
    document.addEventListener("webkitAnimationStart", animationComplete); // Chrome + Safari
});