Question

我有一个CSS3动画，用于不确定的进度条。在动画中，我有一个沿着进度条来回摆动的渐变。当它回到进度条的左侧时，我想在地平线上翻转渐变图像。基本上，渐变总是淡化图像移动的相反方向。不幸的是，我无法找到一种方法让图像在开始向左移动之前水平翻转，并在图像翻转时得到一些奇怪的图像变换。

我创建了一个JSFiddle来展示它现在的样子。 http://jsfiddle.net/MtWzL/

这是我目前用于动画的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;
}

Answer 1

有两个问题需要修复

首先，这个

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

不会按预期工作;第二个属性会覆盖第一个属性，因为您无法在单独的行中为属性设置2个不同的值。

正确的语法是

 -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);   }
}

corrected fiddle

我只更正了webkit转换，但同样的概念适用于其余部分。

Answer 2

因为你把问题放在这里，我正在关注你的问题，但我猜它是某些我们无法解决的错误，或者我只是不明白为什么它会像那样工作。由于我不知道如何解决它，我设法为您提供替代解决方案的例子

EXAMPLE

正如你所看到的，我修改了你的jsfiddle，简单的单词，创建了另一个向后的幻灯片加载器.sliderBack。希望它会以某种方式帮助你。和平:)

CSS Animation Oscillating翻转X轴

2 个答案: