css3 动画

最新推荐文章于 2022-12-15 14:38:50 发布

weixin_30374009

最新推荐文章于 2022-12-15 14:38:50 发布

阅读量59

点赞数

原文链接：http://www.cnblogs.com/anjey/archive/2012/05/30/2526971.html

版权

@-webkit-keyframes revealin{
    from{-webkit-transform:translateX(100%);}
    to  {-webkit-transform:translateX(0);}
}
@-webkit-keyframes revealout{
    from{-webkit-transform:translateX(0);}
    to  {-webkit-transform:translateX(100%);}
}
@-webkit-keyframes pageflipin{
    from{-webkit-transform:rotateY(-90deg)}
    to  {-webkit-transform:rotateY(0);}
}
@-webkit-keyframes pageflipout{
     from{-webkit-transform:rotateY(0);}
     to  {-webkit-transform:rotateY(-90deg);} 
}
@-webkit-keyframes slideinfromright{
    from{-webkit-transform:translateX(100%);}
    to  {-webkit-transform:translateX(0);}
}
@-webkit-keyframes slideinfromleft{
    from{-webkit-transform:translateX(-100%);} 
    to  {-webkit-transform:translateX(0);} 
}
@-webkit-keyframes slideouttoleft{
    from{-webkit-transform:translateX(0);}
    to  {-webkit-transform:translateX(-100%);}
}
@-webkit-keyframes slideouttoright{
    from{-webkit-transform:translateX(0);}
    to  {-webkit-transform:translateX(100%);}
}
@-webkit-keyframes fadein{
    from{opacity:0;} 
    to  {opacity:1;}
}
@-webkit-keyframes fadeout{
    from{opacity:1;}  
    to  {opacity:0;}
}
@-webkit-keyframes flipinfromright{
    from{-webkit-transform:rotateY(-180deg) scale(.8);}
    to  {-webkit-transform:rotateY(0) scale(1);}
}
@-webkit-keyframes flipinfromleft{
    from{-webkit-transform:rotateY(180deg) scale(.8);}
    to  {-webkit-transform:rotateY(0) scale(1);}
}
@-webkit-keyframes flipouttoleft{
    from{-webkit-transform:rotateY(0) scale(1);}
    to  {-webkit-transform:rotateY(-180deg) scale(.8);}
}
@-webkit-keyframes flipouttoright{
    from{-webkit-transform:rotateY(0) scale(1);}
    to  {-webkit-transform:rotateY(180deg) scale(.8);}
}
@-webkit-keyframes slideup{
    from{-webkit-transform:translateY(100%);}
    to  {-webkit-transform:translateY(0);}
}
@-webkit-keyframes slidedown{
    from{-webkit-transform:translateY(0);}
    to  {-webkit-transform:translateY(100%);}
}
@-webkit-keyframes dontmove{
    from{opacity:1;}
    to  {opacity:1;}
}
@-webkit-keyframes cubeinfromleft{
    from{-webkit-transform:rotateY(-90deg) translateZ(320px); opacity:.5;}
    to  {-webkit-transform:rotateY(0deg) translateZ(0); opacity:1;}
}
@-webkit-keyframes cubeouttoright{
    from{-webkit-transform:rotateY(0deg) translateX(0); opacity:1;} 
    to  {-webkit-transform:rotateY(90deg) translateZ(320px); opacity:.5;}
}
@-webkit-keyframes cubeinfromright{
    from{-webkit-transform:rotateY(90deg) translateZ(320px); opacity:.5;} 
    to  {-webkit-transform:rotateY(0deg) translateZ(0); opacity:1;}
}
@-webkit-keyframes cubeouttoleft{
    from{-webkit-transform:rotateY(0deg) translateZ(0); opacity:1;}
    to  {-webkit-transform:rotateY(-90deg) translateZ(320px); opacity:.5;}
}
@-webkit-keyframes popin{
    from{-webkit-transform:scale(.2); opacity:0;}
    to  {-webkit-transform:scale(1); opacity:1;}
}
@-webkit-keyframes popout{
    from{-webkit-transform:scale(1); opacity:1;}
    to  {-webkit-transform:scale(.2); opacity:0;}
}
@-webkit-keyframes swapouttoright{
    0%  {-webkit-transform:translate3d(0px, 0px, 0px) rotateY(0deg); -webkit-animation-timing-function:ease-in-out;}
    50% {-webkit-transform:translate3d(-180px, 0px, -400px) rotateY(20deg); -webkit-animation-timing-function:ease-in;}
    100%{-webkit-transform:translate3d(0px, 0px, -800px) rotateY(70deg);}
}
@-webkit-keyframes swapouttoleft{
    0%  {-webkit-transform:translate3d(0px, 0px, 0px) rotateY(0deg); -webkit-animation-timing-function:ease-in-out;}
    50% {-webkit-transform:translate3d(180px, 0px, -400px) rotateY(-20deg); -webkit-animation-timing-function:ease-in;}
    100%{-webkit-transform:translate3d(0px, 0px, -800px) rotateY(-70deg);}
}
@-webkit-keyframes swapinfromright{
    0%  {-webkit-transform:translate3d(0px, 0px, -800px) rotateY(70deg); -webkit-animation-timing-function:ease-out;}
    50% {-webkit-transform:translate3d(-180px, 0px, -400px) rotateY(20deg); -webkit-animation-timing-function:ease-in-out;}
    100%{-webkit-transform:translate3d(0px, 0px, 0px) rotateY(0deg);}
}
@-webkit-keyframes swapinfromleft{
    0%  {-webkit-transform:translate3d(0px, 0px, -800px) rotateY(-70deg); -webkit-animation-timing-function:ease-out;}
    50% {-webkit-transform:translate3d(180px, 0px, -400px) rotateY(-20deg); -webkit-animation-timing-function:ease-in-out;}
    100%{-webkit-transform:translate3d(0px, 0px, 0px) rotateY(0deg);}
}