CSS3动画链在webkit浏览器中不起作用_Css_Css Animations

CSS3动画链在webkit浏览器中不起作用

css

CSS3动画链在webkit浏览器中不起作用,css,css-animations,Css,Css Animations,我似乎找不到解决这个问题的办法我把一个精灵动画放进了一个div里。现在我想在那个包含div的地方做两个不同的动作应该让div进入视野应该在无限循环中从左向右移动div 它在FF&IE中工作得很好，但链中的第二个动画不能在webkit浏览器中播放有趣的是，如果在Chrome中打开inspector并将鼠标悬停在html代码中的div上，实际上可以看到容器和sprite div在移动，但sprite本身却没有。奇怪的这是密码 Thx提前 html <body> <

我似乎找不到解决这个问题的办法

我把一个精灵动画放进了一个div里。现在我想在那个包含div的地方做两个不同的动作

应该让div进入视野

应该在无限循环中从左向右移动div

它在FF&IE中工作得很好，但链中的第二个动画不能在webkit浏览器中播放

有趣的是，如果在Chrome中打开inspector并将鼠标悬停在html代码中的div上，实际上可以看到容器和sprite div在移动，但sprite本身却没有。奇怪的

这是密码

Thx提前

html

<body>
    <section class="center">

        <div class="movingBox">
            <div class="counter"></div>
        </div>

    </section>
</body>

CSS解决方案在玩完之后，我发现问题是，如果您尝试将两个关键帧动画与相同的CSS属性（

-webkit transform:translateX（）

）组合，第一个将干扰第二个关键帧动画

一个有效的解决方案是只在第一个关键帧动画中设置

left

-值的动画，然后使用

-webkit transform:translateX

@-webkit-keyframes box {
    0% { left: -600px; } 
    100% { left: 0; }
}
@-webkit-keyframes boxMovePlease {
    0% {-webkit-transform: translateX(0px); } 
    33% {-webkit-transform: translateX(100px); } 
    66% {-webkit-transform: translateX(50px); } 
    100% {-webkit-transform: translateX(350px); }
}

这似乎很合乎逻辑。我已经试过了，但是现在第一个动画不起作用。容器div从-600px开始并保持在那里。它不会设置到第一个动画的100%阶段。我还尝试删除0%部分，但它从“left:0”开始，直接转到第二个动画。您的笔中有语法错误。你写的

0%{left:-600px；}

应该是

0%{left:-600px；}

而没有

）

。这是答案；）

@-webkit-keyframes box {
    0% { left: -600px; } 
    100% { left: 0; }
}
@-webkit-keyframes boxMovePlease {
    0% {-webkit-transform: translateX(0px); } 
    33% {-webkit-transform: translateX(100px); } 
    66% {-webkit-transform: translateX(50px); } 
    100% {-webkit-transform: translateX(350px); }
}