CODEWITHSUNDEEP
jquerymacosgoogle-chromesafaricss-transitions
user2358461
user2358461

Reputation: 13

CSS3 Opacity transition, chrome not fading background-image

I'm working on my portfolio and i'm trying some parallax effects with a fade-in on view.

I prefer CSS3 transitions for the animation I only used Jquery waypoints to trigger it.

The fade in works fine in Firefox the whole div fades in however in Chrome & Safari on Mac the background-image of the div does not fade it just jumps in.

for an example check (the blurry part should fade in) http://www.jasperaarts.com/2013/#work

I add or remove a class active_item or inactive_item this way I trigger the CSS transition.

.active_item {

    -webkit-opacity: 1.0;
    -moz-opacity: 1.0;
    -ms-opacity: 1.0;
    -o-opacity: 1.0;
    opacity: 1.0;

    -webkit-transition: opacity 1000ms ease 500ms;
    -moz-transition: opacity 1000ms ease 500ms;
    -ms-transition: opacity 1000ms ease 500ms;
    -o-transition: opacity 1000ms ease 500ms;
    transition: opacity 1000ms ease 500ms;
}
.inactive_item {

    -webkit-opacity: 0;
    -moz-opacity: 0;
    -ms-opacity: 0;
    -o-opacity: 0;
    opacity: 0;
}

Alternatives I have tried are Jquery fadeIn and fadeOut or Animate css in Jquery both show simliar results.

Upvotes: 1

Views: 2059

Answers (1)

user2358461
user2358461

Reputation: 13

Thanks to Godwin, I have narrowed it down to a compatibility issue with Isotope.js script and the Parallax css.

Upvotes: 0

Related Questions