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