1

我有以下 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 中不行。我究竟做错了什么？

4

2 回答 2

2

我认为您错过了基于 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;
}
于 2013-10-09T19:24:40.707 回答
0

从到目前为止我们从 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

于 2013-10-09T20:17:39.880 回答