CSS动画完成后设置新的最终状态

Question

我有一个应用了CSS动画的HTML元素，我想在动画结束后将其捕捉为另一种样式

.animatingElement {
   -webkit-animation: myAnimation 0.25s ease-in-out forwards;
}

@-webkit-keyframes myAnimation {
  from {
    state1
    }
  to {  
    state2
    }
}

.animatingElementFinal {
   /*desired final/3rd state*/
}

动画制作完成后，有什么方法可以应用不同于动画最终状态的样式吗？

谢谢您的建议！