CODEWITHSUNDEEP
csssafariwebkitcss-animations
user2097137
user2097137

Reputation: 25

How do I get the slide in as you scroll down (CSS Trick) technique to work in Safari?

I'm trying a technique described on CSS Tricks:
http://css-tricks.com/slide-in-as-you-scroll-down-boxes/

I'm a bit stumped on this one... When I view the technique on the CSS Tricks website in Safari, it works fine... However, when I try the code out, I can't get it to work on Safari... Works fine in Firefox and Chrome.

Anyone have any ideas?
I greatly appreciate some extra eyes on this, because I've been staring at this way too long.

Thanks in advance.

JSFiddle:
http://jsfiddle.net/pjbsL1mk/1/

The code is pretty much verbatim, except that I added "-webkit-" along side the original code to the classes... Also, I'm using jQuery 1.8.3.

.come-in {
    -webkit-transform: translateY(150px);
    -webkit-animation: come-in 1s ease forwards;
    -webkit-animation-delay: 0.2s;
    transform: translateY(150px);
    animation: come-in 1s ease forwards;
    animation-delay: 0.2s;
}

.come-in:nth-child(odd) {
  animation-duration: 0.6s; /* So they look staggered */
}

.already-visible {
    -webkit-transform: translateY(0);
    -webkit-animation: none;
    transform: translateY(0);
    animation: none;
}

@-webkit-keyframes come-in {
    to {
        transform: translateY(0);   
    }
} 

@keyframes come-in {
    to {
        transform: translateY(0);
    }
}

Upvotes: 1

Views: 3613

Answers (1)

rhgb
rhgb

Reputation: 4205

You forgot to add -webkit- prefix on some properties:

@-webkit-keyframes come-in {
    to {
        -webkit-transform: translateY(0);   // here
    }
}

This should make the animation work. Also add -webkit- here:

.come-in:nth-child(odd) {
    -webkit-animation-duration: 0.6s; // here
}

Upvotes: 1

Related Questions