css - 如何阻止 -webkit-animation 恢复？或者使 -webkit-transition 在多个步骤中动画

Question

可能重复：
Webkit CSS 动画问题 - 保持动画的结束状态？

我想为翻转屏幕进行两步转换：我的代码如下：

.flipto {
  -webkit-animation-name: flippingto;
  -webkit-animation-duration: 1.5s;
  }

.flipfrom {
  -webkit-animation-name: flippingfrom;
  -webkit-animation-duration: 1.5s;
  }

@-webkit-keyframes flippingto {
  from {
    -webkit-transform: rotateY(180deg) rotateZ(180deg);
    -webkit-animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: rotateY(180deg);
    -webkit-animation-timing-function: ease-out;
  }
  to {
  }
}

@-webkit-keyframes flippingfrom {
  from {
    -webkit-animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: rotateY(180deg);
    -webkit-animation-timing-function: ease-out;
  }
  to {
      -webkit-transform: rotateY(180deg) rotateZ(180deg);
  }
}

flippingto 有效，但是在完成动画后，flippingfrom 恢复到原始类，我尝试了 -webkit-transition 但我没有找到一种方法将动画分成两个不同的步骤，而在一个步骤中，它看起来很难看。

这是否意味着我必须添加 javascript？