CSS动画摆动翻转X轴

我有一个不确定进度条的CSS3动画。在动画中，我有一个沿进度条来回摆动的渐变。我想水平翻转渐变的图像，因为它会返回到进度条的左侧。基本上，渐变总是在图像移动的相反方向淡出。不幸的是，在图像开始向左移动之前，我想不出一个水平翻转的方法，在图像翻转时，我得到了一些奇怪的图像变换

我创建了一个JSFIDLE来展示它现在的样子。

以下是我当前用于动画的CSS：

@-webkit-keyframes loader {
    0% {
        -webkit-transform: scaleX(1);
        -webkit-transform: translateX(-100px);
        -webkit-transform-origin:left;
    }
    50% {
        -webkit-transform: translateX(300px);
    }
    100% {
        -webkit-transform: translateX(-100px);
        -webkit-transform: scaleX(-1);
    }
}

@keyframes loader {
    0% {
        transform: scaleX(1);
        transform: translateX(-100px);
        transform-origin:left;
   }
   50% { 
        transform: translateX(300px);
   }
   100% {
        transform: translateX(-100px);
        transform: scaleX(-1);
   }
}

.slider
{
    animation: loader 2.5s infinite linear;
    -webkit-animation: loader 2.5s infinite linear; /* Safari and Chrome */
    background: url('http://s23.postimg.org/mglkwgxuv/indeterminate_bg.png') no-repeat;
    border-radius: 10px;
    height: 10px;
    position: relative;
    width: 100px;
    z-index: 999;
    opacity: .6;
} 

.container {
    background: -webkit-linear-gradient(#00c3ff,#0071bc);
    background: linear-gradient(#00c3ff,#0071bc);
    border-radius: 3px;
    height: 10px;
    overflow: hidden;
    width: 300px;
}

.background {
    background: rgba(0,0,0,0.7);
    border-radius: 3px;
    display: inline-block;
    padding: 10px;
}

---

我一直在关注你的问题，因为你把它放在这里，但我想这是某种我们无法解决的错误，或者我只是不明白为什么它会这样工作。 因为我不知道如何解决这个问题，所以我设法用另一种解决方案为你们做了一个例子

---

如您所见，我修改了您的JSFIDLE，simple Word，创建了另一个向后的幻灯片加载程序

。希望它能对你有所帮助。和平：）
自从你把你的问题放在这里后，我一直在关注你的问题，但我想这是某种我们无法解决的错误，或者我只是不明白它为什么会这样工作。
因为我不知道如何解决这个问题，所以我设法用另一种解决方案为你们做了一个例子


如您所见，我修改了您的JSFIDLE，simple Word，创建了另一个向后的幻灯片加载程序
。希望它能对你有所帮助。和平：）
有两个问题需要解决

首先，这个

    -webkit-transform: scaleX(1);
    -webkit-transform: translateX(-100px);

不会像你期望的那样工作；第二个属性优先于第一个属性，因为不能在单独的行中为属性设置两个不同的值

正确的语法应该是

 -webkit-transform: translateX(-100px) scaleX(1);

第二，如果希望某个值发生突然变化，则需要将其从一个关键帧设置为与第一个关键帧足够接近的另一个关键帧

因此，解决办法是

@-webkit-keyframes loader {
    0% { -webkit-transform: translateX(-100px) scaleX(1);    }
   50% { -webkit-transform: translateX(300px)  scaleX(1);    }
   51% { -webkit-transform: translateX(300px)  scaleX(-1);   }
  100% { -webkit-transform: translateX(-100px) scaleX(-1);   }
}


我只更正了webkit转换，但相同的概念适用于其余部分。
有两个问题需要解决

首先，这个

    -webkit-transform: scaleX(1);
    -webkit-transform: translateX(-100px);

不会像你期望的那样工作；第二个属性优先于第一个属性，因为不能在单独的行中为属性设置两个不同的值

正确的语法应该是

 -webkit-transform: translateX(-100px) scaleX(1);

第二，如果希望某个值发生突然变化，则需要将其从一个关键帧设置为与第一个关键帧足够接近的另一个关键帧

因此，解决办法是

@-webkit-keyframes loader {
    0% { -webkit-transform: translateX(-100px) scaleX(1);    }
   50% { -webkit-transform: translateX(300px)  scaleX(1);    }
   51% { -webkit-transform: translateX(300px)  scaleX(-1);   }
  100% { -webkit-transform: translateX(-100px) scaleX(-1);   }
}


我只纠正了webkit转换，但同样的概念也适用于其余部分。
这非常有效。非常感谢你的清楚解释。我忍不住觉得有点傻，没有意识到这个属性被覆盖了。这尤其有用，因为我没有权限对此项目进行DOM更改，所以无法使用Szymon的解决方案。这非常有效。非常感谢你的清楚解释。我忍不住觉得有点傻，没有意识到这个属性被覆盖了。这尤其有用，因为我没有权限对此项目进行DOM更改，所以无法使用Szymon的solution@LLong没问题，好吧，答案很傻：D。很高兴你们的问题解决了。和平：）@allon没问题，好吧，解决办法是愚蠢的：D。很高兴你们的问题解决了。和平：）