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

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

div:hover {

  animation-name: changeColor;

  animation-duration: 5s;

  animation-timing-function: ease-out;

  animation-delay: .1s;

  animation-fill-mode:forwards;

}

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

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

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

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

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

对比了下时间，我觉得是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%;
}