CSS3 Animate property not working in Chrome, works in Firefox/IE

Problem

I have the following CSS3 properties:

@keyframes fadeSlideIn { from { bottom: -2em; opacity:0; } to { bottom: -.5em; opacity:1; } }
@-webkit-keyframes fadeSlideIn { from { bottom: -2em; opacity:0; } to { bottom: -.5em; opacity:1; } }


#dropdown-menu li a span.notify {
    position:absolute;
    bottom:-2em;
    right: 0.5em;

    width: 1.5em;
    height: 1.5em;

    line-height:1.5em;
    text-align:center;

    font-family:"Helvetica Neue";
    font-weight:bold;
    color:#fff;
    text-shadow:0px 1px 0px rgba(0,0,0,.15);

    -webkit-box-shadow:
        inset 0px 1px 0px rgba(255,255,255,35),
        0px 1px 1px rgba(0,0,0,.2);
    -moz-box-shadow:
        inset 0px 1px 0px rgba(255,255,255,.35),
        0px 1px 1px rgba(0,0,0,.2);
    box-shadow:
        inset 0px 1px 0px rgba(255,255,255,.35),
        0px 1px 1px rgba(0,0,0,.2);

    -webkit-border-radius:4em;
    -moz-border-radius:4em;
    border-radius:4em;

    opacity:0;
    filter: alpha(opacity=0);

    animation: fadeSlideIn ease-in 1;
    -webkit-animation: fadeSlideIn ease-in 1;
    animation-fill-mode: forwards;

    animation-duration: 1s;
    animation-delay: 0.5s

}

#dropdown-menu li a span.notify.pink {
    background-image: -webkit-linear-gradient(top, rgb(231, 56, 56), rgb(204, 24, 56));
    background-image: -moz-linear-gradient(top, rgb(231, 56, 56), rgb(204, 24, 56));
    background-image: -o-linear-gradient(top,   rgb(231, 56, 56), rgb(204, 24, 56));
    background-image: -ms-linear-gradient(top,  rgb(231, 56, 56), rgb(204, 24, 56));
    background-image: linear-gradient(top,      rgb(231, 56, 56), rgb(204, 24, 56));

    border:1px solid #a3112b;
}
#dropdown-menu li a span.yellow {
    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba48');

    border:1px solid #dea94f;
}
#dropdown-menu li a span.blue {
    background-image: -webkit-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
    background-image: -moz-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
    background-image: -o-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
    background-image: -ms-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
    background-image: linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#ace4f8', EndColorStr='#6ccdf3');

    border:1px solid #79b5cb;
}

This works fine in IE/Firefox - but not Chrome. What am I doing wrong?

Problem courtesy of: Barry Chapman

Solution

I think you missed the definition of animation-duration, animation-delay and animation-fill-mode properties for webkit-based browsers:

#dropdown-menu li a span.notify {
    ...
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 0.5s;
    -webkit-animation-fill-mode: forwards;
}
Solution courtesy of: artygus

Discussion

From all the information we know so far from the OP, @Arty Gus is pointing in the right direction. Just want to add, that there's a shortcut for all animation values:

animation: fadeSlideIn ease-in 1s .5s 1 forward;
-webkit-animation: fadeSlideIn ease-in 1s .5s forward 1;

See for example Chris Coyiers keyframe animation syntax post: http://css-tricks.com/snippets/css/keyframe-animation-syntax/

Edit: fill-mode added to -webkit-animation

Discussion courtesy of: Volker E.

This recipe can be found in it's original form on Stack Over Flow.