Css 如何在最后一帧停止动画

我试着在三个方向上旋转一个立方体。我需要在第三个框停止动画，但它会回到原始位置。从第三个盒子有一个动画返回到我不想要的第一个盒子。动画应该在第三个盒子停止。给出一些解决方案

#微调器div{
位置：绝对位置；
宽度：120px；
高度：120px；
边框：1px实心#ccc；
背景：rgba（255，255，255，0.8）；
框阴影：插入0 20px rgba（0,0,0,0.2）；
文本对齐：居中；
线高：120px；
字体大小：100px；
}
#旋转器面1{
-webkit转换：translateZ（60px）；
}
#旋转器面2{
-webkit变换：旋转（90度）平移（60像素）；
}
#旋转器面3{
-webkit变换：rotateY（90度）rotateX（90度）translateZ（60像素）；
}
@-webkit关键帧spincube{
从，到{}16%{
-webkit变换：旋转（-90度）；
}
33% {
-webkit变换：rotateY（-90度）rotateZ（90度）；
}
}
#纺纱机{
-webkit动画名称：spincube；
-webkit动画计时功能：轻松输入输出；
-webkit动画迭代计数：1；
-webkit动画填充模式：正向；
-webkit动画持续时间：8s；
-webkit变换样式：保留-3d；
-webkit转换源：60px 60px 0；
}

1.
2.
3.

虽然您已将

动画填充模式设置为
向前
（
-webkit
前缀在您尝试使用Chrome时不应该是一个问题），但动画并未在第三个框停止，因为您的
to
设置（最后一个关键帧）将动画恢复到其原始状态（显示框1）。要解决此问题，可以使最后一个关键帧也保持与33%相同的位置（显示框3）


#微调器div{
位置：绝对位置；
宽度：120px；
高度：120px；
边框：1px实心#ccc；
背景：rgba（255，255，255，0.8）；
框阴影：插入0 20px rgba（0,0,0,0.2）；
文本对齐：居中；
线高：120px；
字体大小：100px；
}
#旋转器面1{
-webkit转换：translateZ（60px）；
}
#旋转器面2{
-webkit变换：旋转（90度）平移（60像素）；
}
#旋转器面3{
-webkit变换：rotateY（90度）rotateX（90度）translateZ（60像素）；
}
@-webkit关键帧spincube{
从{}
16% {
-webkit变换：旋转（-90度）；
}
33% {
-webkit变换：rotateY（-90度）rotateZ（90度）；
}
到{
-webkit变换：rotateY（-90度）rotateZ（90度）；
}
}
#纺纱机{
-webkit动画名称：spincube；
-webkit动画计时功能：轻松输入输出；
-webkit动画迭代计数：1；
-webkit动画填充模式：正向；
-webkit动画持续时间：8s；
-webkit变换样式：保留-3d；
-webkit转换源：60px 60px 0；
}

1.
2.
3.
有趣的是，您的代码可能存在重复的
动画填充模式
设置为
转发
。你在用什么浏览器？谢谢harry我用的是Chrome。非常感谢harry