CSS3 动画应该停在位置 75%

Question

是否可以在 75% 时停止 CSS3 动画并且不应在 0% 时再次显示或至少在 75% 时延迟 10 秒？现在当动画完成时它显示在位置 0%

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  -webkit-animation-name: example;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 4s;
  /* Chrome, Safari, Opera */
  animation-name: example;
  animation-duration: 4s;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes example {
  0% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
  25% {
    background-color: yellow;
    left: 200px;
    top: 0px;
  }
  50% {
    background-color: blue;
    left: 200px;
    top: 200px;
  }
  75% {
    background-color: green;
    left: 0px;
    top: 200px;
  }
}

<div></div>

Answer 1

我对你的动画做了一些修改，你需要做的就是复制你的 75% 动画两次，然后使用 animation-fill-mode属性并将其设置为 forwards 以在最后一个位置停止动画。

Demo

div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    animation-name: example;
    animation-duration: 4s;

    /* add these properties */
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    /* add the below one */
    100%  {background-color:green; left:0px; top:200px;}
}