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);}
}

 /*由左到右进场*/

.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);}
}

/*透明度由无到有*/

.HeightFrom0To100{
    -webkit-animation:HeightFrom0To100 1000ms .2s ease both;
   
}
@-webkit-keyframes HeightFrom0To100{
0%{opacity:0;
    }

100%{
    opacity:1;
    }

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

.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)
    }
}

/*比例由小变大*/

.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)
    }
}

/*比例由大变小*/

.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;
    }
}

/*旋转360度*/

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

}

 @-webkit-keyframes Rotate360 {
  0% {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(360deg);}
}

/*X轴翻拍进入*/

@-webkit-keyframes intro05TextWrapText7{
    0%{-webkit-transform:rotateX(90deg);}
    100%{-webkit-transform:rotateX(0deg);}
}

/*Y轴翻拍进入*/

@-webkit-keyframes intro05TextWrapText7{
    0%{-webkit-transform:rotateY(90deg);}
    100%{-webkit-transform:rotateY(0deg);}
}

/*箭头移动类*/

.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)
    }
}

/*摇一摇*/

.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);}

}

.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);}

}

/*木板摇动*/

 @-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;
  }
}

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

.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)
    }
}

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

.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);}
}

/*由下到上弹出*/

.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;
    }    
}

 /*上下跳一跳*/

 .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);}
}

 从下到上出现并左右晃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);
    }        
}