个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-03 17:40:42 25 4
gpt4 key购买 nike

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

我已将 Sprite 动画放入 div 中。现在我想要包含 div 的 2 个不同的 Action 。

  1. 应该让 div 进入视野
  2. 应该无限循环地从左向右移动 div

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

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

这是代码 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); }
}

最佳答案

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

关于CSS3 动画链在 webkit 浏览器中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29153900/

25 4 0
文章推荐： python 模块来解码 OSX plist 整数日期？
文章推荐： python - 使用蓝图在 Flask 中设计 API
文章推荐： c# - 接收 : Difference between CurrentThreadScheduler and ImmediateScheduler
文章推荐： javascript - 如何从现有的 svg 对象分配 css 背景图像？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com