Question

我有一个div带有一个介绍animation，点击后我添加了一个名为'exit'的新类，但是动画不起作用。

div { animation: intro steps(14) 1s 1;
      animation-fill-mode: forwards; 
    }

div.exit { animation: exit steps(18) 1s 1;
           animation-fill-mode: forwards;
         }

有什么想法吗？

Answer 1

动画正在运行，但你告诉它转到0px。

如果你说：

@keyframes exit {
    0% { background:yellow; }
    100% { background:black; }
}

工作正常：http://jsfiddle.net/fsqp7vgk/1/

所以，动画正在运行，但你再次告诉它去0px的位置。解决方案是在.exit {left:500px;} //中指定您之前的位置。

这是移动动画：http://jsfiddle.net/fsqp7vgk/2/

.exit {animation:exit 5s 1; left:500px; }

@keyframes intro {
    0% { left:100px; }
    100% { left:500px; }
}
@keyframes exit {
    0% { left:500px; }
    100% { left:0px; }
}

当然，如果您使用chrome，请保留-webkit- prefix。

Answer 2

工作正常，你在下面的代码中弄错了。

您忘记添加 px after 500.

<强> FIDDLE

@-webkit-keyframes exit {
    0% {
        left:500px;
    }
    100% {
        left:0;
    }
}

CSS多个动画

2 个答案: