关键帧动画不返回第一点或重复

Question

我正在尝试使用一个不会返回到第一个位置的关键帧，我的意思是如果我从左到右转换，保持右转不返回到左侧。

码

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  -webkit-animation-name: example;
  -webkit-animation-duration: 4s;
  animation-name: example;
  animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */

@-webkit-keyframes example {
  0% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
  100% {
    background-color: yellow;
    left: 200px;
    top: 0px;
  }
}


/* Standard syntax */

@keyframes example {
  0% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
  100% {
    background-color: yellow;
    left: 200px;
    top: 0px;
  }
}

<div></div>

Answer 1

你只需要将animation-fill-mode: forwards;添加到div中。

div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation-name: example; 
    -webkit-animation-duration: 4s; 
    -webkit-animation-fill-mode: forwards;
    animation-name: example;
    animation-duration: 4s;
    animation-fill-mode: forwards;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    100% {background-color:yellow; left:200px; top:0px;}
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    100% {background-color:yellow; left:200px; top:0px;}
}

<div></div>

Answer 2

你只需要添加'animation-iteration-count：1'就可以单次运行，或者如果你想在循环中使用它，那么可以在div中尝试'animation-iteration-count：infinite'。

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  -webkit-animation-name: example;
  -webkit-animation-duration: 4s;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 1; /*value can be infinite if you want to it in loop */
}

/* Safari 4.0 - 8.0 */

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


/* Standard syntax */

@keyframes example {
  0% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
  50%{
    background-color: yellow;
    left: 200px;
    top: 0px;
  }
  100% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
}

<div></div>