CSS Transitions Cause jQuery FadeIn() to Not Work

While working on a small side project, I discovered an interesting quirk related to jQuery’s fadeIn method: If the element you’re trying to fade in has it’s transition property set (it doesn’t matter what vendor prefix you use), the element will just appear without fading in. Here’s a quick example:

This is the CSS I’m using.

image { /* Fade in page images */
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    display: block;
    -webkit-transition: all 1s ease-in-out; /* Transition properties (for each vendor) */
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
image:hover {
    opacity: .5; /* When you mouse over the image, reduce opacity by 50% */
}

And here’s the JavaScript:

$(document).ready(function() {
    var images = $('img');

    images.hide();

    images.each(function(i) {
        $(this).delay(i * 50).fadeIn(500); // Sequentially fade in each image
    });
});

When this is run, the images don’t fade in but are instead made visible in sequential order (no fading effect). After doing some digging, I discovered that if I removed the transition properties from the CSS and instead applied them dynamically after each image is done fading in, everything worked fine (both the fade-in and the opacity reduction on hover).

The CSS

image { /* I'm trying to fade in a bunch of images (individually) on the page */
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    display: block;
}
image:hover {
    opacity: .5 /* When you mouse over the image, reduce opacity by 50% */
}

The JavaScript

$(document).ready(function() {
    var images = $('img');

    images.hide();

    images.each(function(i) {
        $(this).delay(i * 50).fadeIn(500, function() {
            $(this).css({
                '-webkit-transition': 'all 1s ease-in-out',
                '-moz-transition': 'all 1s ease-in-out',
                '-o-transition': 'all 1s ease-in-out',
                'transition': 'all 1s ease-in-out',
            });
    });
});

Unfortunately, I’m not exactly certain as to why this problem occurs in jQuery. I’ve stepped through what jQuery is doing during a fade-in and I don’t see anything that would conflict with what is in the stylesheet. If anyone else has encountered this problem and happens to know more about what’s going on, please let me know in the comments below.