CSS3动画（webkit关键帧）问题

我正在学习CSS3动画

我正在尝试移动方框，问题出现在第三个方框（坏方框） 我已经给了剩余的框，它们之间有一个小延迟的动画

这是

以下是出现问题的代码部分：

#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%;}
}

现在它正在沿对角线移动一小段

我想要的是第三个盒子，它通向第一条输送带的末端，垂直向下移动到第二条输送带，然后停留 那里

PS：同时还有一个活塞图像，但它没有显示在小提琴上。

给你，检查

如果尚未在其父CSS中定义“边距顶部”，请不要在关键帧中指定“边距顶部”。 就像您在“badBox1”CSS中定义的“top:48%”一样然后，您应该进一步处理相同的值，以便“top:48%；”为了垂直向下移动，更改为“顶部：65%”

---

您可以根据需要定义任意多个关键帧百分比，还可以相应地不断更改动画持续时间以调整它们。百分比指的是您希望对特定元素进行更改（动画）的位置。

您可以做的是在定义关键帧时更加精确。我根据您的代码做了一个简短的说明（在本例中，我省略了其他框）。由于您已将

动画填充模式

定义为

转发

，因此删除

动画迭代计数：无限将保持结束状态，使箱子停留在第二条皮带上

下面是我示例中的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%;}
}

在你的CSS中试试这个

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

这是
，活塞图像没有显示，因为您给了它一个
z-index:-1
@-webkit-keyframes badBox1Moving {
    0% {
        left:-10%;
        top: 48%;
    }
    50% {
        left:75%;
        top: 48%;
    }
    75% {
        left: 75%;
        top: 60%;
    }
    100% {
        left: 75%;
        top: 60%;
    }
}