jquery - 一次 CSS 动画图像

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特性。例如

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 以便在运行后将其保持在最终动画帧上(而不是恢复到起始帧)。