/*由右到左进场*/
.FromRightToLeft{
-webkit-animation:FromRightToLeft 500s .2s ease both;
}
@-webkit-keyframes FromRightToLeft{
0%{
opacity:;
-webkit-transform:translateX(3000px)}
100%{
opacity:;
-webkit-transform:translateX(0);}
}/*由左到右进场*/
.FromLeftToRight{
-webkit-animation:FromLeftToRight 500ms .2s ease both;
}
@-webkit-keyframes FromLeftToRight{
0%{
opacity:;
-webkit-transform:translateX(-3000px)}
100%{
opacity:;
-webkit-transform:translateX(0);}
}/*透明度由无到有*/
.HeightFrom0To100{
-webkit-animation:HeightFrom0To100 1000ms .2s ease both;
}
@-webkit-keyframes HeightFrom0To100{
0%{opacity:;
}
100%{
opacity:;
}/*淡入并向上移动一点位置出现*/
.fadeInUp{
-webkit-animation:fadeInUp 1000ms .8s ease both;
}
@-webkit-keyframes fadeInUp {
0% {
opacity:;
-webkit-transform: translateY(20px);
transform: translateY(20px)
}
100% {
opacity:;
-webkit-transform: translateY(0);
transform: translateY(0)
}
}/*比例由小变大*/
.fadeInFromSmall{
-webkit-animation:fadeInFromSmall 500ms .2s ease both;
transform-origin:50% 60%;
}
@-webkit-keyframes fadeInFromSmall {
0% {
opacity:;
-webkit-transform: scale(0.1);
transform: scale(0.1)
}
40% {
opacity:;
-webkit-transform: scale(1.02);
transform: scale(1.02)
}
100% {
opacity:;
-webkit-transform: scale(1);
transform: scale(1)
}
}/*比例由大变小*/
.fadeInFromBig{
-webkit-animation:fadeInFromBig 500ms .2s ease both ;
}
@-webkit-keyframes fadeInFromBig {
0% {
-webkit-transform: scale(3);
opacity:;
}
50% {
-webkit-transform: scale(0.92);
opacity:;
}
100% {
-webkit-transform: scale(1);
opacity:;
}
}/*旋转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:;
-webkit-transform: translateY(-20px);
transform: translateY(-20px)
}
100% {
opacity:;
-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:;
-webkit-transform: translateY(-300px);
transform: translateY(-300px)
}
60% {
opacity:;
-webkit-transform: translateY(30px);
transform: translateY(30px)
}
80% {
opacity:;
-webkit-transform: translateY(-10px);
transform: translateY(-10px)
}
100% {
opacity:;
-webkit-transform: translateY(0);
transform: translateY(0)
}
}/*由上到下进场并弹起二次*/
.FromUpToDownBounceTwice{
-webkit-animation:FromUpToDownBounceTwice 1500ms .2s ease both;
}
@-webkit-keyframes FromUpToDownBounceTwice{
0%{
opacity:;
-webkit-transform:translate3d(0,-1000px,0);}
20%{
opacity:;
-webkit-transform:translate3d(0,30px,0);}
40% {
opacity:;
-webkit-transform: translateY(-30px);
transform: translateY(-30px)
}
60% {
opacity:;
-webkit-transform: translateY(0);
transform: translateY(0)
}
80% {
opacity:;
-webkit-transform: translateY(-10px);
transform: translateY(-10px)
}
100%{
opacity:;
-webkit-transform:translate3d(0px,0px,0);}
}/*由下到上弹出*/
.expandUp{
-webkit-animation:expandUp 500ms .2s ease-in both;
}
@-webkit-keyframes expandUp {
0% {
opacity:;
transform: translateY(100%) scale(0.6) scaleY(0.5);
}
60%{
-webkit-transform: translateY(-7%) scaleY(1.12);
opacity:;
}
75%{
-webkit-transform: translateY(3%);
opacity:;
}
100% {
-webkit-transform: translateY(0%) scale(1) scaleY(1);
opacity:;
}
}/*上下跳一跳*/
.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:;
-webkit-transform: rotate(0deg) scaleY(0.6);
}
20% {
opacity:;
-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);
}
}