从左到右，从右到左动画

Question

我对css3动画有问题; 我有两个动画：一个在顶部，一个在底部。 顶部动画将从0宽度加载到100％并且它工作得很好但是第二个动画应该从右到左加载0到100％宽度并且不起作用:(有人可以解释我为什么？ 的 here is my fiddle exaple:

.left-to-right {animation:myfirst 1s ease;}
.right-to-left {animation:mysecond 1s ease;}

@keyframes myfirst {
  0%   {width:0; margin-left:100%;}
    100% {width: 100%; margin-left: 0;}
}
@keyframes mysecond {
  0%   {width:100%; margin-left: 0;}
    100% {width: 0; margin-left:100%;}
}

Answer 1

你在第二个动画的边距上犯了一个错误。你可以删除它们：

<强> DEMO

@keyframes mysecond {
    0%   {width:0;}
    100% {width: 100%;}
}