Question

div{
    animation: fly 5s linear infinite;
    animation-direction: alternate;  
 }

@keyframes fly {
    0% {  left:0px; }
    100% { left:100%; }
  }

我有一个代码可以在一个无限循环中设置div的动画我只想用transform:scaleX(-1);来翻转div 当动画达到左边的100％时，当它再次变为0％时，再回到transform:scaleX(1);。

我正在尝试在关键帧上使用transform：scaleX（-1），但它也会使用fly动画进行动画处理。像这样的东西： Click link to see the sample

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

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

1 个答案: