css - -webkit-animation が元に戻らないようにするにはどうすればよいですか? または、複数のステップで -webkit-transition animate を作成します

Question

重複の可能性:
Webkit CSS アニメーションの問題 - アニメーションの終了状態を保持していますか?

画面を反転するための 2 段階のトランジションを作成したい: 私のコードは次のようなものです:

.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 はアニメーションの終了後に元のクラスに戻ります。

これは、javascript を追加する必要があるということですか?