在 css3 动画循环达到 100% 后翻转 div，并在达到 0% 时翻转回来，没有 jquery

Question

div{
    animation: fly 5s linear infinite;
    animation-direction: alternate;  
 }
@keyframes fly {
    0% {  left:0px; }
    100% { left:100%; }
  }

我

有一个代码可以在无限循环中对div 进行动画处理，我只想用 transform:scaleX(-1); 翻转div当动画达到左侧的 100% 并翻转回 transform:scaleX(1); 再次达到 0% 时。

我正在尝试在关键帧上使用 transform：scaleX（-1），但它也使用飞行动画进行动画处理。像这样： 单击链接以查看示例

Answer 1

您需要添加控制scaleX的其他关键帧。此外，alternate动画方向对您不起作用：沿着整个时间轴设置关键帧，在中间反转方向。示例：http://jsfiddle.net/Palpatim/r4pNk/

.test {
    width: 100px;
    border: 1px solid grey;
    text-align: center;
    -webkit-animation: fly 2s infinite linear;
    -moz-animation: fly 2s infinite linear;
    -o-animation: fly 2s infinite linear;
    animation: fly 2s infinite linear;
}
@-webkit-keyframes fly {
    0% {
        -webkit-transform: translate(0) scaleX(1);
    }
    0.01% {
        -webkit-transform: translate(0) scaleX(1);
    }
    49.99% {
        -webkit-transform: translate(300px) scaleX(1);
    }
    50% {
        -webkit-transform: translate(300px) scaleX(-1);
    }
    50.01% {
        -webkit-transform: translate(300px) scaleX(-1);
    }
    99.99% {
        -webkit-transform: translate(0) scaleX(-1);
    }
    100% {
        -webkit-transform: translate(0) scaleX(1);
    }
}