个回答

• qq_嶸歸_0

  2018-08-21 13:51:49

  你的问题这样解决，加上最后一行，

  让最终结果就显示到绿色实心圆

  div:hover {

    animation-name: changeColor;

    animation-duration: 5s;

    animation-timing-function: ease-out;

    animation-delay: .1s;

    animation-fill-mode:forwards;

  }

  
  

  0

• Jean_Lee_mihu

  2015-11-19 21:23:13

  animation-fill-mode主要具有四个属性值：none、forwards、backwords和both

  • none---默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处、

  • forwards---表示动画在结束后继续应用最后的关键帧的位置

  • backwards---会在向元素应用动画样式时迅速应用动画的初始帧

  • both---元素动画同时具有forwards和backwards效果

  4

• Jean_Lee_mihu

  2015-11-18 20:47:09

  对比了下时间，我觉得是animation总的5s是从红方框到绿圆再回到红方框的时间，你说的瞬间变回红色是没搞明白，可能是因为keyframes设置的是关键帧而不是动画的结果，所以动画完成后，会迅速恢复。加上transition就不会出现了。一下为示例，不知道这样写是否符合规范，嘿嘿

  @keyframes changeColor {
    from {
      background: red;
      border-radius:0;
    }
    to {
      background:green;
      border-radius:100%;
    }
  }
  div {
    width: 200px;
    height: 200px;
    background: red;
    text-align:center;
    margin: 20px auto;
    line-height: 200px;
    color: #fff;
    transition:all .1s  ease-in 0;
  }
  div:hover {
    animation-name: changeColor;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: .1s;
    /* transitioin设置动画后结果，避免恢复到红方框 */
    background:green;
    border-radius:100%;
  }

  1