为什么这个css转换效果在不同的浏览器上看起来不一样？

Question

在Chrome和Firefox上，道路从左到右移动，在Safari上从右到左，为什么？也许与关键帧相关的东西？

这是CSS效果的JSFiddle link。

#scene {
  -moz-perspective: 120px;
  -moz-transform-style: preserve-3d;
  -moz-perspective-origin: 50% 50%;
  -webkit-perspective: 120;
  -webkit-perspective-origin-x: 50%;
  -webkit-perspective-origin-y: 50%;
  perspective: 120;
  perspective-origin-x: 50%;
  perspective-origin-y: 50%;
}

#road {
  overflow: hidden;
  margin: 0 auto;
  width: 300px;
  background: #343432;
  position: absolute;
  left: 40px;
  top: 0;
  height: 400px;
  border: solid 2px #444;
  border-top: none;
  border-bottom: none;
  -webkit-transform: rotateX(36deg);
  -moz-transform: rotateX(36deg);
  -o-transform: rotateX(36deg);
  -ms-transform: rotateX(36deg);
  transform: rotateX(36deg);
}

@keyframes "striper" {
  0% {
    top: -200px;
  }
  100% {
    top: 0px;
  }
}

@-moz-keyframes striper {
  0% {
    top: -200px;
  }
  100% {
    top: 0px;
  }
}

@-webkit-keyframes "striper" {
  0% {
    top: -200px;
  }
  100% {
    top: 0px;
  }
}

@-ms-keyframes "striper" {
  0% {
    top: -200px;
  }
  100% {
    top: 0px;
  }
}

@-o-keyframes "striper" {
  0% {
    top: -200px;
  }
  100% {
    top: 0px;
  }
}

#stripes {
  -webkit-animation: striper 1100ms infinite linear;
  -moz-animation: striper 1100ms infinite linear;
  -ms-animation: striper 1100ms infinite linear;
  -o-animation: striper 1100ms infinite linear;
  animation: striper 1100ms infinite linear;
  width: 0px;
  height: 1200px;
  margin: 0 auto;
  border: dashed 2px #fded30;
  border-left: none;
  position: relative;
  top: -200px;
}

<div id="scene">
  <div id="road">
    <div id="stripes"></div>
  </div>
</div>