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

Question

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

我已将精灵动画放入 div。现在我想要包含 div.

的 2 个不同的动作

应该让 div 进入视野
应该在无限循环中从左向右移动 div

它在 FF 和 IE 中完美运行，但链中的第二个动画在 webkit 浏览器中无法播放....

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

代码如下http://codepen.io/anon/pen/yyGJGX?editors=110

提前致谢。

html

<body>
    <section class="center">

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

    </section>
</body>

CSS

.center {
    width:600px;
    height:400px;
    position:absolute;
    z-index: 0;
    left:50%;
    top:50%;
    margin:-200px 0 0 -325px;
    text-align:center;
    overflow: hidden;
}

.movingBox {
    width: 600px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;

    -webkit-animation-name: box, box-move;
    -webkit-animation-delay: 0s, 4s;
    -webkit-animation-duration: 4s, 6s;
    -webkit-animation-timing-function: ease-out, ease-in-out;
    -webkit-animation-iteration-count:  1, infinite;
    -webkit-animation-fill-mode: forwards, none;
    -webkit-animation-direction: normal, alternate;

    animation-name: box, box-move;
    animation-delay: 0s, 4s;
    animation-duration: 4s, 6s;
    animation-timing-function: ease-out, ease-in-out;
    animation-iteration-count:  1, infinite;
    animation-fill-mode: forwards, none;
    animation-direction: normal, alternate;  
}

.counter {
    position: absolute;
    bottom: 0;
    left: 150px;
    width:160px;
    height:160px;
    display:block;  
    background:transparent url(../img/test.png) 0 0 no-repeat;
    z-index: 20;
    -webkit-animation: teller 4s steps(4) infinite;
    animation: teller 4s steps(4) infinite;
}




@-webkit-keyframes teller {
     0% {background-position: 0 0; } 
     100% {background-position: 0 -640px; }
}

@-webkit-keyframes box {
     0% {-webkit-transform: translateX(-600px); } 
     100% {-webkit-transform: translateX(0px); }
}

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

@keyframes teller {
     0% {background-position: 0 0; } 
     100% {background-position: 0 -640px; }
}

@keyframes box {
     0% {transform: translateX(-600px); } 
     100% {transform: translateX(0px); }
}

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

Answer 1

CSS 解决方案

玩了一圈之后，我发现问题是如果您尝试将两个关键帧动画与相同 CSS properties (-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); }
}

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

CSS3 Animation chain not working in webkit browsers

css

css-animations

CSS 解决方案