CSS3 动画（webkit 关键帧）问题答案

【问题标题】：CSS3 animation (webkit keyframes) issueCSS3 动画（webkit 关键帧）问题
【发布时间】：2014-04-19 08:50:16
【问题描述】：

我正在学习 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：还有一个活塞图像，虽然它没有显示在小提琴中..

【问题讨论】：

标签： css animation responsive-design css-transitions css-animations

【解决方案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%;}
}

如果您尚未在其父 CSS 中定义它，请不要在关键帧中提供“margin-top”。就像在 '#badBox1' CSS 中定义的 'top: 48%;'那么您应该进一步研究相同的值，以使“顶部：48％；”为了垂直向下移动更改为“顶部：65%”；

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

【讨论】：

活塞图像没有显示，因为你给了它z-index: -1;

【解决方案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%;}
}

【讨论】：

【解决方案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

【讨论】：