IE10 No Webkit not working

Question

I could really use some help. On this site http://medicalaid.org I've been trying to fix it after another developer left. The last problem I've got is I can't get half of the webkit animations to load in IE10, all other browsers work fine and virtually all content divs have them. I've tried rewriting the css for example:

@-webkit-keyframes bounceIn { 
    0% { 
        opacity: 0; 
        -webkit-transform: scale(.3);
        -moz-transform: scale(.3);
        -o-transform: scale(.3);
        -ms-transform: scale(.3); 
    } 

    50% { 
        opacity: 1; 
        -webkit-transform: scale(1.05); 
        -moz-transform: scale(1.05); 
        -o-transform: scale(1.05); 
        -ms-transform: scale(1.05); 
    } 

    70% { 
        -webkit-transform: scale(.9); 
        -moz-transform: scale(.9); 
        -o-transform: scale(.9); 
        -ms-transform: scale(.9); 
    } 

    100% { 
         -webkit-transform: scale(1); 
         -moz-transform: scale(1); 
         -o-transform: scale(1); 
         -ms-transform: scale(1); 
    } 
} 

@keyframes bounceIn { 
    0% { 
        opacity: 0; 
        transform: scale(.3); 
    } 

    50% { 
        opacity: 1; 
        transform: scale(1.05); 
    } 

    70% { 
        transform: scale(.9); 
    } 

    100% { 
        transform: scale(1); 
    } 
} 

.bounceIn.go { 
    -webkit-animation-name: bounceIn; 
    -moz-animation-name: bounceIn; 
    -o-animation-name: bounceIn; 
    -ms-animation-name: bounceIn; 
    animation-name: bounceIn; 
}

And I can't get anything to work, would be great if someone could take a look and help me out

Answer 1

Try to remove the unprefixed versions of your css:

@keyframes bounceIn { 
    0% { 
        opacity: 0; 
        transform: scale(.3); 
    } 

    50% { 
        opacity: 1; 
        transform: scale(1.05); 
    } 

    70% { 
        transform: scale(.9); 
    } 

    100% { 
        transform: scale(1); 
    } 
} 

Answer 2

You need to define more than just the animation-name; you'll also need to provide duration. Without this information the browser doesn't know how long the animation is to last. Below I'm stating that the entire animation should last 2 seconds:

.bounceIn.go {
    animation: bounceIn 2s;
}

The resulting animation is presumably along the lines of what you were desiring. I defined styles for .go that would make it green, and rounded.