CSS3 Animate 属性在 Chrome 中不起作用，在 Firefox/IE 中起作用

Posted 2023-03-06

【中文标题】CSS3 Animate 属性在 Chrome 中不起作用，在 Firefox/IE 中起作用

【英文标题】：CSS3 Animate property not working in Chrome, works in Firefox/IE

【发布时间】：2013-10-17 07:39:15

【问题描述】：

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

【问题讨论】：

你有一些 html 代码吗？

在 Chrome 中究竟有什么不能用的？我猜@Arty Gus 的答案是正确的方向。

【参考方案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;

【讨论】：

这使它接近，但动画元素在动画后立即消失。有什么想法吗？

@BarryChapman 我打错了填充模式，正确的是“转发”（答案也改变了）

谢谢！我现在可以了:)

【参考方案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

【讨论】：

是的，想说明，但有点忙）顺便说一句，你错过了 -webkit-animation 中的填充模式