CSS过渡通过彼此

Question

我在这里有一个动画http://jsfiddle.net/fjyL7cdw/9/，它在Safari中相互传递。我可能将背面可见性设置为隐藏会有所帮助，但事实并非如此。这是我的CSS。提前谢谢。

.orniment img{
position: absolute;
}

.orniment-1{
    top: -130px;
    z-index:1;
      -webkit-animation-name: rotatefast;
      -webkit-animation-duration: 3s;
      -webkit-animation-direction: alternate;
      -webkit-animation-iteration-count: infinite;
      -webkit-transform-origin:50% -40px;
      -webkit-animation-timing-function: ease-in-out; 
      animation-name: rotatefast;
      animation-duration: 3s;
      animation-direction: alternate;
      animation-iteration-count: infinite;
      transform-origin:50% -40px;
      animation-timing-function:ease-in-out; /* REG */
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
}

.orniment-2{
    top: -240px;
    left: 50px;
    z-index: 10;
      -webkit-animation-name: rotateslow;
      -webkit-animation-duration: 5s;
      -webkit-animation-direction: alternate;
      -webkit-animation-iteration-count: infinite;
      -webkit-transform-origin:50% -40px;
      -webkit-animation-timing-function:ease-in-out; /* WEBKIT */
      animation-name: rotateslow;
      animation-duration: 5s;
      animation-direction: alternate;
      animation-iteration-count: infinite;
      transform-origin:50% -40px;
      animation-timing-function:ease-in-out; 
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
}