CSS3动画(WebKit KeyFrames)问题

Question

我正在研究CSS3Animation ..

正在尝试移动盒子， essue 出现在 3rd Box（Bad Box）中我给了其余的盒子，上面有一个小延迟的动画。

这是我的小提琴：

这是问题发生的代码的一部分：

#badBox1{ 
    max-height: 21%;
    max-width: 21%;
    position: absolute;
    top: 48%;
    left: -8%;
    -webkit-animation-name:badBox1Moving;
    -webkit-animation-duration: 6s;
    -webkit-animation-delay: 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes badBox1Moving{
    0%   { left:-10%;}
    80% { left:70%;}
    100% { margin-top:15%;}
}

现在它的对角线移动lil ...

我想要的是第三个盒子到第一个输送带的尽头，然后垂直移动到第二个传送带和留下 那里。

ps ：还有一个活塞图像，但是它并未在小提琴中显示。

Answer 1

在这里，检查emo

#badBox1{ 
    max-height: 21%;
    max-width: 21%;
    position: absolute;
    top: 48%;
    left: -8%;
    -webkit-animation-name:badBox1Moving;
    -webkit-animation-duration: 8s;
    -webkit-animation-delay: 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes badBox1Moving{
    0%   { left:-10%;}
    75% { left:70%;}
    85% { left:80%;top:48%; }
    90% { left:82%;top:65%; }
    95% { left:82%;top:65%;}
    100% { left:82%;top:65%;}
}

如果您尚未在其父级CSS中定义它，请不要在密钥帧中给出"保证金顶"。就像在"＃badbox1" CSS中所定义的"顶部：48％;"然后，您应该进一步以相同的价值为基础，以便"顶部：48％;"为了垂直向下移动更改为"顶部：65％"；

您可以根据需要定义任意数量的密钥帧百分比，并且还可以继续相应地更改动画持续时间以调整它们。百分比是指您想要更改（动画）进行特定元素的位置。

Answer 2

您可以做的是在定义密钥帧时更加精确。我根据您的代码制作了一个快速 demo （在此示例中，我遗漏了其他框）。由于您已将animation-fill-mode定义为forwards，因此删除animation-iteration-count: infinite;将持续终端状态，从而使盒子停留在第二个皮带上。

这是我的示例中的CSS代码：

#badBox1{ 
    max-height: 21%;
    max-width: 21%;
    position: absolute;
    top: 48%;
    left: -8%;
    -webkit-animation-name:badBox1Moving;
    -webkit-animation-duration: 6s;
    -webkit-animation-delay: 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes badBox1Moving{
    0%   { left:-10%;}
    99%  { top:48%;}
    100% { left:81%; top:65%;}
}

Answer 3

在您的CSS

中尝试一下

@-webkit-keyframes badBox1Moving {
    0% {
        left:-10%;
        top: 48%;
    }
    50% {
        left:75%;
        top: 48%;
    }
    75% {
        left: 75%;
        top: 60%;
    }
    100% {
        left: 75%;
        top: 60%;
    }
}

这是小提琴