0

このcss3javascriptアニメーションをスムーズかつ細かくする方法はありますか？リンク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);}

}
4

1 に答える 1

2

animation-fill-mode プロパティを追加することで、アニメーションの最後に保持する必要があるのは、アニメーションの最初のフレームか最後のフレームかを選択できます。

animation-fill-mode: forwards;

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

于 2012-10-03T10:44:13.603 に答える