CSS3动画（webkit的关键帧）问题

我试图移动框和发生问题在3盒（坏盒） 我已经给箱子的其余部分在他们之间有一个小延迟动画。

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

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

眼下其移动斜律...

我想要的是第三个箱子到第一个传送带的末端，并垂直向下移动到第二个传送带，并且停留 there。

PS：还有一个活塞图像与此相伴，它不是在小提琴虽然显示..

来源

2014-03-14 Nevin Madhukar K

在这里你去，检查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％”;

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

来源

2014-03-14 07:59:42 Abhi

和活塞图像不显示，因为你给了它一个'z-index：-1;' – Abhi

您可以做的是在定义关键帧时更加精确。我根据你的代码做了一个快速的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%;} 
}

来源

2014-03-14 08:09:06

在你的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

来源

2014-03-14 08:09:25

CSS3动画（webkit的关键帧）问题

回答

相关问题