is there a way to make this css3 javascript animation smooth and fine please see the link jsfiddle
css animation i use is given below
.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);}
}
By adding the animation-fill-mode property, you can choose whether it is the first or last frame of the animation that should be kept at the end of the animation:
animation-fill-mode: forwards;
https://developer.mozilla.org/en-US/docs/CSS/animation-fill-mode
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.