CSS 动画在 Safari、Firefox 和 Chrome 中以三种不同的方式表现

Question

这就是我所拥有的：http://jsfiddle.net/t5p8ypxs/9/
这是我的 CSS：

.wrapper{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
max-width: 960px;
margin: 0 auto;
}
.square{
    width:100px;
    height:100px;
    position: absolute;
    background-color:red;
    -webkit-animation: imageFrames01 5s ease-out infinite;
    -moz-animation: imageFrames01 5s ease-out infinite;
    animation: imageFrames01 5s ease-out infinite;
}

@-moz-keyframes imageFrames01 {
     0% {
    left: 0%;
    top: 0%;
  }
  15.15152% {
    left: 0%;
    top: 0%;
    opacity: 1;
  }
  30.66667% {
    left: 154%;
    opacity: 0;
    top: -98%;
  }
  30.67667% {
    left: -63%;
    opacity: 1;
    top: -138%;
  }
  90.48485% {
    left: -63%;
    opacity: 1;
    top: -138%;
  }
}

@-webkit-keyframes imageFrames01 {
  /*Same as above in @-moz-keyframes*/
}

@keyframes imageFrames01 {
 /*Same as above in @-moz-keyframes*/
}

Safari 是唯一一个像我期望的那样设置动画的浏览器。

1. 从左上角移入
2. 移到右上角
3. 无限重复

在 Chrome 中我得到了这个：

1. 只是出现，没有动画
2. 移到右上角
3. 无限重复

Firefox 最糟糕的是没有位置动画。只有不透明度...

任何想法。这是为什么呢？

我使用的是 Safari 8、Chrome 42 和 Firefox 33

Answer 1

-moz-animation: imageFrames01 66s ease-out infinite;

尝试像其他 Mozilla 一样将 66s 更改为 5s...