Question

我有以下CSS3属性：

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

这在IE / Firefox中运行良好 - 但不适用于Chrome。我做错了什么？

Answer 1

我认为您错过了基于webkit的浏览器的animation-duration，animation-delay和animation-fill-mode属性的定义：

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

Answer 2

根据我们迄今为止所知道的OP的所有信息，@ Arty Gus正指向正确的方向。只想添加，即所有动画值的快捷方式：

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

例如，参见Chris Coyiers关键帧动画语法帖子：http://css-tricks.com/snippets/css/keyframe-animation-syntax/

编辑：填充模式已添加到-webkit-animation

CSS3 Animate属性在Chrome中无效，适用于Firefox / IE

2 个答案: