保持旋轉CSS3動畫後的最終現在的位置

Question

有沒有辦法讓這個CSS3 JavaScript動畫光滑細膩請參見鏈接jsfiddle

CSS動畫我用下面的

.pageanim 
{ 
    /* Safari and Chrome */ 
    -webkit-animation:nextpage 1s; 
    -webkit-animation-timing-function:linear; 
    -webkit-transform-origin: left; 
    -webkit-transform-style: preserve-3d; 


} 
.hideface 
{ 
    backface-visibility:hidden; 
    -webkit-backface-visibility:hidden; 

} 
@-webkit-keyframes nextpage /*Safari and Chrome*/ 
{ 
from {-webkit-transform:rotatey(0deg); } 
to {-webkit-transform:rotatey(-180deg); 
} 

} 


.revpageanim 
{ 
    /* Safari and Chrome */ 
    -webkit-animation:prepage 1s; 
    -webkit-animation-timing-function:linear; 
    -webkit-transform-origin: 100% 0% 0px; 

} 

@-webkit-keyframes prepage 
{ 
from {-webkit-transform:rotatey(0deg);} 
to {-webkit-transform:rotatey(90deg);} 

} 

Answer 1

給出通過增加動畫填充模式屬性，您可以選擇是否應將動畫的第一幀或最後一幀保留在動畫結尾處：

animation-fill-mode: forwards; 

https://developer.mozilla.org/en-US/docs/CSS/animation-fill-mode