CSS 多重动画

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

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

您忘记添加 px after 500.

FIDDLE

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

Answer 2

动画正在运行，但你告诉它转到 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。