How do I stop -webkit-animation from reverting? Or make -webkit-transition animate in multiple steps

Question

I want to make a two-step transition for flipping the screen: My code is like:

.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 works, but flippingfrom reverts to the original class after finishing the animation, I tried -webkit-transition but I didn't find a way to make the animation into two distinct steps, while in one step, it looks ugly.

Does this mean I have to add javascript?

Answer 1

Okay I found the answer here: http://stackoverflow.com/questions/3273478/webkit-css-animation-issue-persisting-the-end-state-of-the-animation