css3常用动画效果集合01

/*由右到左进场*/

.FromRightToLeft{

    -webkit-animation:FromRightToLeft 500s .2s ease both;

}

@-webkit-keyframes FromRightToLeft{

0%{

    opacity:0;

    -webkit-transform:translateX(3000px)}

100%{

    opacity:1;

    -webkit-transform:translateX(0);}

}

View Code

 /*由左到右进场*/

.FromLeftToRight{

    -webkit-animation:FromLeftToRight 500ms .2s ease both;

}

@-webkit-keyframes FromLeftToRight{

0%{

    opacity:0;

    -webkit-transform:translateX(-3000px)}

100%{

    opacity:1;

    -webkit-transform:translateX(0);}

}

View Code

/*透明度由无到有*/

.HeightFrom0To100{

    -webkit-animation:HeightFrom0To100 1000ms .2s ease both;

   

}

@-webkit-keyframes HeightFrom0To100{

0%{opacity:0;

    }



100%{

    opacity:1;

    }

View Code

/*淡入并向上移动一点位置出现*/

.fadeInUp{

    -webkit-animation:fadeInUp 1000ms .8s ease both;

}

@-webkit-keyframes fadeInUp {

    0% {

        opacity: 0;

        -webkit-transform: translateY(20px);

        transform: translateY(20px)

    }



    100% {

        opacity: 1;

        -webkit-transform: translateY(0);

        transform: translateY(0)

    }

}

View Code

/*比例由小变大*/

.fadeInFromSmall{

    -webkit-animation:fadeInFromSmall 500ms .2s ease both;

    transform-origin:50% 60%;

}

@-webkit-keyframes fadeInFromSmall {

    0% {

        opacity: 0;

        -webkit-transform: scale(0.1);

        transform: scale(0.1)

    }



    40% {

        opacity: 1;

        -webkit-transform: scale(1.02);

        transform: scale(1.02)

    }



    100% {

        opacity: 1;

        -webkit-transform: scale(1);

        transform: scale(1)

    }

}

View Code

/*比例由大变小*/

.fadeInFromBig{

      -webkit-animation:fadeInFromBig 500ms .2s ease both ;

}



@-webkit-keyframes fadeInFromBig {

    0% {

        -webkit-transform: scale(3);

        opacity: 0;

    }

    50% {

        -webkit-transform: scale(0.92);

        opacity: 1;

    }

    100% {

        -webkit-transform: scale(1);

        opacity: 1;

    }

}

View Code

/*旋转360度*/

 .Rotate360 {-webkit-animation: Rotate360 0.2s 0s alternate infinite;



}



 @-webkit-keyframes Rotate360 {

  0% {-webkit-transform: rotate(0deg);}

  100% {-webkit-transform: rotate(360deg);}

}

View Code

/*X轴翻拍进入*/

@-webkit-keyframes intro05TextWrapText7{

    0%{-webkit-transform:rotateX(90deg);}

    100%{-webkit-transform:rotateX(0deg);}

}

View Code

/*Y轴翻拍进入*/

@-webkit-keyframes intro05TextWrapText7{

    0%{-webkit-transform:rotateY(90deg);}

    100%{-webkit-transform:rotateY(0deg);}

}

View Code

/*箭头移动类*/

.arrow{

    position:absolute;left:306px;top:884px;display:none;

    -webkit-animation:arrow 1000ms 1000ms alternate-reverse  infinite;

}



@-webkit-keyframes arrow {

    0% {

        opacity: 1;

        -webkit-transform: translateY(-20px);

        transform: translateY(-20px)

    }



    100% {

        opacity: 1;

        -webkit-transform: translateY(0);

        transform: translateY(0)

    }

}

View Code

/*摇一摇*/

.shark{-webkit-animation:shark 800ms 1500ms infinite linear alternate ;-webkit-transform-origin:80% 80%;}

@-webkit-keyframes shark{

    0%{-webkit-transform:rotateZ(45deg);}

   

    100%{-webkit-transform:rotateZ(-25deg);}



}

View Code

.shark02{-webkit-animation:shark02 800ms 1500ms infinite ease-in-out alternate ;-webkit-transform-origin:80% 80%;}

@-webkit-keyframes shark02{

    0%,20%,40%,80%,100%{-webkit-transform:translateX(-20px);}

   

    10%,30%,50%,90%{-webkit-transform:translateX(20px);}



}

View Code

/*木板摇动*/

 @-webkit-keyframes Plank{

  0% {

    -webkit-transform: none;

            transform: none;

  }



  15% {

    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);

            transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);

  }



  30% {

    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);

            transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);

  }



  45% {

    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);

            transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);

  }



  60% {

    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);

            transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);

  }



  75% {

    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);

            transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);

  }



  100% {

    -webkit-transform: none;

            transform: none;

  }

}

View Code

/*由上到下进场并弹起一次*/

.bounceInDown{

    -webkit-animation:bounceInDown 800ms .2s ease both;

}

@-webkit-keyframes bounceInDown {

    0% {

        opacity: 0;

        -webkit-transform: translateY(-300px);

        transform: translateY(-300px)

    }



    60% {

        opacity: 1;

        -webkit-transform: translateY(30px);

        transform: translateY(30px)

    }



    80% {

        opacity: 1;

        -webkit-transform: translateY(-10px);

        transform: translateY(-10px)

    }



    100% {

        opacity: 1;

        -webkit-transform: translateY(0);

        transform: translateY(0)

    }

}

View Code

/*由上到下进场并弹起二次*/

.FromUpToDownBounceTwice{

    -webkit-animation:FromUpToDownBounceTwice 1500ms .2s ease both;

}

@-webkit-keyframes FromUpToDownBounceTwice{

0%{

    opacity:0;

    -webkit-transform:translate3d(0,-1000px,0);}

20%{

    opacity:1;

    -webkit-transform:translate3d(0,30px,0);}

40% {

        opacity: 1;

        -webkit-transform: translateY(-30px);

        transform: translateY(-30px)

    }



    60% {

        opacity: 1;

        -webkit-transform: translateY(0);

        transform: translateY(0)

    }

    80% {

        opacity: 1;

        -webkit-transform: translateY(-10px);

        transform: translateY(-10px)

    }

100%{

    opacity:1;

    -webkit-transform:translate3d(0px,0px,0);}

}

View Code

/*由下到上弹出*/

.expandUp{

    -webkit-animation:expandUp 500ms .2s ease-in both;

         

    

}





@-webkit-keyframes expandUp {

    0% {

        opacity:0;

        transform: translateY(100%) scale(0.6) scaleY(0.5);

       

    }

    60%{

        -webkit-transform: translateY(-7%) scaleY(1.12);

       opacity:1;

    }

    75%{

        -webkit-transform: translateY(3%);

       opacity:1;

    }    

    100% {

        -webkit-transform: translateY(0%) scale(1) scaleY(1);

       opacity:1;

    }    

}

View Code

 /*上下跳一跳*/

 .tiao_fly {-webkit-animation: tiao_fly 0.2s 0s alternate infinite;

 -webkit-transform: rotateZ(-20.5deg);

}



 @-webkit-keyframes tiao_fly {

  0% {-webkit-transform:translateX(0%) translateY(-15%) rotateZ(-20.5deg);}

  100% {-webkit-transform:translateX(0%) translateY(-0%) rotateZ(-20.s);}

}

View Code

 从下到上出现并左右晃2下

.hatch{

      -webkit-animation:hatch 500ms .2s ease-in both;

      transform-origin: 50% 100%;

}

@-webkit-keyframes hatch {



    0% {

        opacity:0;

        -webkit-transform: rotate(0deg) scaleY(0.6);

    }

    20% {

        opacity:1;



        -webkit-transform: rotate(-2deg) scaleY(1.05);

    }

    35% {

        -webkit-transform: rotate(2deg) scaleY(1);

    }

    50% {

        -webkit-transform: rotate(-2deg);

    }    

    65% {

        -webkit-transform: rotate(1deg);

    }    

    80% {

        -webkit-transform: rotate(-1deg);

    }        

    100% {

        -webkit-transform: rotate(0deg);

    }        

}

View Code