Question

我正在学习CSS3animation ..

我试图移动方框，第三个方框（坏方框）会出现问题我已经给了其余的盒子，它们之间有一个小延迟的动画。

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

#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 ：还有一个活塞图像，但它没有显示在小提琴中..

Answer 1

在这里，请查看DEMO

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

不要给予＆＃39; margin-top＆＃39;在关键帧中，如果你还没有在它的父CSS中定义它。就像＃badBox1＆＃39;您定义的CSS＆＃39; top：48％;＆＃39;那么你应该进一步研究相同的价值，以便最好：48％;＆＃39;为了垂直向下移动更改到顶部：65％＆＃39 ;;

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

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

这里是fiddle

CSS3动画（webkit关键帧）问题

3 个答案: