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


Tags: css3,safari,webkit,css-animations

Problem :

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);
    }
}


Solution :

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
}

    CSS Howto..

    How to make CSS URL background images show up in localhost?

    how to hide the content of the div in css

    How do I override Bootstrap's
    border-left with a FontAwesome icon in CSS?

    How to vertically align

    tag in navbar

    How do I specify a css selector which matches exactly one of multiple values?

    How do I get this div to cover flash control (jw player)?

    How to perfectly center contents in an unordered list?

    Sum of two divs widths is greater than parent width. How to make the browser resize the last div instead of moving it to the next line?

    Awkward gap between menu items. How to fix?

    How to create Chrome DevTool style bar charts with grids using plain CSS/HTML?

    Changing the color of the tomb. How do I do this?

    How to have different input text styles in same html form?

    How to make the text that are typed inside the input to appear into a seperate div

    How to Mask Images with Dynamic Sizes to Shapes?

    How to assign a Css class on an item based on click

    How to position a div so that it always appear 100px from top of the visible display

    How to solve this (seemingly simple) formatting problem in CSS?

    How to specify the system’s default serif and sans-serif font-family?

    how to bypass style in element that is automatically applied through class?

    How to display components horizontally with CSS

    How to make a curved triangle speech bubble with pseudo-elements?

    How to think to get all content inline (HTML & CSS)

    How to make CSS animation happen the moment the website loads

    How do change CSS Class from Code Behind?

    how to put inline image css in ghost-blog?

    How to make a div 100% width minus a certain amount?

    How to use CSS Rotate() in TH Table Tags

    How to prepend a div to another div using javascript

    Android WebView : how do I control webView height?

    Show Button in Table Cell Hover Over/Mouse Over