Question

基本上我想将图像从中间向左移动100个像素，然后保持在该位置。我希望它能在网页加载后运行几秒钟。我已尝试使用此

        div img {
    width: 120px;
    height: 120px;
    position: relative;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}
/* Standard syntax */
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {left: 500px;}
    to {left: 400px;}
}
/* Standard syntax */
@keyframes mymove {
    from {left: 500px;}
    to {left: 400px;}
}

虽然这是无限的，但一旦页面加载就会发生，我似乎无法弄清楚如何添加等待。此外，我不认为我并定义中间距离，然后从那里移动100个像素。

谢谢，最大

Answer 1

使用CSS的animation-delay和animation-iteration-count属性。 E.g。

div {
  animation-delay: 1s; /* start the animation after 1 second */
  animation-iteration-count: 1; /* only do the animation once */
  animation-fill-mode: forwards; /* don't go back to the start */
}

编辑：最好只查看所有animation-*属性，以完全了解完成所需输出所需的内容。正如@Hans在评论中提到的那样，您可能需要添加animation-fill-mode以便在运行后将其保留在最终动画帧上（而不是恢复到起始帧）。

Answer 2

在你的css上试试这个：

.yourclassanimationname{
    -ms-animation: animatedctrls 1s;
    -webkit-animation: animatedctrls 1s;
    animation: animatedctrls 1s;
}

@keyframes animatedctrls{
    0%{margin-right:-60%;}
    100%{margin-right:25%;}
}

如果这些边距是移动的开始和结束，请将此类应用于图像，它应该这样做。希望它有所帮助！

CSS

2 个答案: