登录
首页 关注 专题 工具箱 付费 博客

CSS3动画超实用炫酷的特效代码记得收藏！

系统推荐 更新：2019-12-13 08:27:27

直接复制下方代码到CSS文件里面就可以引用了，超好用，不懂怎么用的联系我V：89605517，免费帮你调试！

 .Bounce, .Flip, .Flash, .Shake, .Wobble, .Tada, .RubberBand, .Swing { -webkit-animation: 1s ease; -moz-animation: 1s ease; -ms-animation: 1s ease; animation: 1s ease; } 


.BounceIn, .BounceInT, .BounceInL, .BounceInR, .BounceInB, .FadeIn, .FadeInT, .FadeInL, .FadeInR, .FadeInB, .Flip, .FlipInX, .FlipInY, .LightSpeedIn { -webkit-animation: 1s ease-out backwards; -moz-animation: 1s ease-out backwards; -ms-


animation: 1s ease-out backwards; animation: 1s ease-out backwards; }

.BounceOutT, .BounceOutL, .BounceOutR, .BounceOutB, .FadeOut, .FadeOutT, .FadeOutL, .FadeOutR, .FadeOutB, .BounceOut, .FlipOutX, .FlipOutY, .LightSpeedOut { -webkit-animation: 1s ease-in forwards; -moz-animation: 1s ease-in forwards; -


ms-animation: 1s ease-in forwards; animation: 1s ease-in forwards; }

.Bounce { -webkit-animation-name: Bounce; -moz-animation-name: Bounce; -ms-animation-name: Bounce; animation-name: Bounce; }

.BounceIn { -webkit-animation-name: BounceIn; -moz-animation-name: BounceIn; -ms-animation-name: BounceIn; animation-name: BounceIn; }

.BounceInT { -webkit-animation-name: BounceInT; -moz-animation-name: BounceInT; -ms-animation-name: BounceInT; animation-name: BounceInT; }

.BounceInL { -webkit-animation-name: BounceInL; -moz-animation-name: BounceInL; -ms-animation-name: BounceInL; animation-name: BounceInL; }

.BounceInR { -webkit-animation-name: BounceInR; -moz-animation-name: BounceInR; -ms-animation-name: BounceInR; animation-name: BounceInR; }

.BounceInB { -webkit-animation-name: BounceInB; -moz-animation-name: BounceInB; -ms-animation-name: BounceInB; animation-name: BounceInB; }

.BounceOut { -webkit-animation-name: BounceOut; -moz-animation-name: BounceOut; -ms-animation-name: BounceOut; animation-name: BounceOut; }

.BounceOutT { -webkit-animation-name: BounceOutT; -moz-animation-name: BounceOutT; -ms-animation-name: BounceOutT; animation-name: BounceOutT; }

.BounceOutL { -webkit-animation-name: BounceOutL; -moz-animation-name: BounceOutL; -ms-animation-name: BounceOutL; animation-name: BounceOutL; }

.BounceOutR { -webkit-animation-name: BounceOutR; -moz-animation-name: BounceOutR; -ms-animation-name: BounceOutR; animation-name: BounceOutR; }

.BounceOutB { -webkit-animation-name: BounceOutB; -moz-animation-name: BounceOutB; -ms-animation-name: BounceOutB; animation-name: BounceOutB; }

.FadeIn { -webkit-animation-name: FadeIn; -moz-animation-name: FadeIn; -ms-animation-name: FadeIn; animation-name: FadeIn; }

.FadeInT { -webkit-animation-name: FadeInT; -moz-animation-name: FadeInT; -ms-animation-name: FadeInT; animation-name: FadeInT; }

.FadeInL { -webkit-animation-name: FadeInL; -moz-animation-name: FadeInL; -ms-animation-name: FadeInL; animation-name: FadeInL; }

.FadeInR { -webkit-animation-name: FadeInR; -moz-animation-name: FadeInR; -ms-animation-name: FadeInR; animation-name: FadeInR; }

.FadeInB { -webkit-animation-name: FadeInB; -moz-animation-name: FadeInB; -ms-animation-name: FadeInB; animation-name: FadeInB; }

.FadeOut { -webkit-animation-name: FadeOut; -moz-animation-name: FadeOut; -ms-animation-name: FadeOut; animation-name: FadeOut; }

.FadeOutT { -webkit-animation-name: FadeOutT; -moz-animation-name: FadeOutT; -ms-animation-name: FadeOutT; animation-name: FadeOutT; }

.FadeOutL { -webkit-animation-name: FadeOutL; -moz-animation-name: FadeOutL; -ms-animation-name: FadeOutL; animation-name: FadeOutL; }

.FadeOutR { -webkit-animation-name: FadeOutR; -moz-animation-name: FadeOutR; -ms-animation-name: FadeOutR; animation-name: FadeOutR; }

.FadeOutB { -webkit-animation-name: FadeOutB; -moz-animation-name: FadeOutB; -ms-animation-name: FadeOutB; animation-name: FadeOutB; }

.Flip { -webkit-animation-name: Flip; -moz-animation-name: Flip; -ms-animation-name: Flip; animation-name: Flip; }

.FlipInX { -webkit-animation-name: FlipInX; -moz-animation-name: FlipInX; -ms-animation-name: FlipInX; animation-name: FlipInX; }

.FlipInY { -webkit-animation-name: FlipInY; -moz-animation-name: FlipInY; -ms-animation-name: FlipInY; animation-name: FlipInY; }

.FlipOutX { -webkit-animation-name: FlipOutX; -moz-animation-name: FlipOutX; -ms-animation-name: FlipOutX; animation-name: FlipOutX; }

.FlipOut, .FlipOutY { -webkit-animation-name: FlipOutY; -moz-animation-name: FlipOutY; -ms-animation-name: FlipOutY; animation-name: FlipOutY; }

.Flash { -webkit-animation-name: Flash; -moz-animation-name: Flash; -ms-animation-name: Flash; animation-name: Flash; }

.Shake { -webkit-animation-name: Shake; -moz-animation-name: Shake; -ms-animation-name: Shake; animation-name: Shake; }

.Swing { -webkit-animation-name: Swing; -moz-animation-name: Swing; -ms-animation-name: swing; animation-name: Swing; }

.Wobble { -webkit-animation-name: Wobble; -moz-animation-name: Wobble; -ms-animation-name: Wobble; animation-name: Wobble; }

.Tada { -webkit-animation-name: Tada; -moz-animation-name: Tada; -ms-animation-name: Tada; animation-name: Tada; }

.RubberBand { -webkit-animation-name: RubberBand; -moz-animation-name: RubberBand; -ms-animation-name: RubberBand; animation-name: RubberBand; }

.LightSpeedIn { -webkit-animation-name: LightSpeedIn; -moz-animation-name: LightSpeedIn; -ms-animation-name: LightSpeedIn; animation-name: LightSpeedIn; }

.LightSpeedOut { -webkit-animation-name: LightSpeedOut; -moz-animation-name: LightSpeedOut; -ms-animation-name: LightSpeedOut; animation-name: LightSpeedOut; }
@-webkit-keyframes RubberBand {
0% {
-webkit-transform:scale(1);
transform:scale(1);
}
30% {
-webkit-transform:scaleX(1.25) scaleY(0.75);
transform:scaleX(1.25) scaleY(0.75);
}
40% {
-webkit-transform:scaleX(0.75) scaleY(1.25);
transform:scaleX(0.75) scaleY(1.25);
}
60% {
-webkit-transform:scaleX(1.15) scaleY(0.85);
transform:scaleX(1.15) scaleY(0.85);
}
100% {
-webkit-transform:scale(1);
transform:scale(1);
}
}
@-moz-keyframes RubberBand {
0% {
-moz-transform:scale(1);
transform:scale(1);
}
30% {
-moz-transform:scaleX(1.25) scaleY(0.75);
transform:scaleX(1.25) scaleY(0.75);
}
40% {
-moz-transform:scaleX(0.75) scaleY(1.25);
transform:scaleX(0.75) scaleY(1.25);
}
60% {
-moz-transform:scaleX(1.15) scaleY(0.85);
transform:scaleX(1.15) scaleY(0.85);
}
100% {
-moz-transform:scale(1);
transform:scale(1);
}
}
@-ms-keyframes RubberBand {
0% {
-ms-transform:scale(1);
transform:scale(1);
}
30% {
-ms-transform:scaleX(1.25) scaleY(0.75);
transform:scaleX(1.25) scaleY(0.75);
}
40% {
-ms-transform:scaleX(0.75) scaleY(1.25);
transform:scaleX(0.75) scaleY(1.25);
}
60% {
-ms-transform:scaleX(1.15) scaleY(0.85);
transform:scaleX(1.15) scaleY(0.85);
}
100% {
-ms-transform:scale(1);
transform:scale(1);
}
}
@keyframes RubberBand {
0% {
transform:scale(1);
transform:scale(1);
}
30% {
transform:scaleX(1.25) scaleY(0.75);
transform:scaleX(1.25) scaleY(0.75);
}
40% {
transform:scaleX(0.75) scaleY(1.25);
transform:scaleX(0.75) scaleY(1.25);
}
60% {
transform:scaleX(1.15) scaleY(0.85);
transform:scaleX(1.15) scaleY(0.85);
}
100% {
transform:scale(1);
transform:scale(1);
}
}
@-webkit-keyframes LightSpeedIn {
0% {
-webkit-transform:translateX(100%) skewX(-30deg);
transform:translateX(100%) skewX(-30deg);
opacity:0;
}
60% {
-webkit-transform:translateX(-20%) skewX(30deg);
transform:translateX(-20%) skewX(30deg);
opacity:1;
}
80% {
-webkit-transform:translateX(0%) skewX(-15deg);
transform:translateX(0%) skewX(-15deg);
opacity:1;
}
100% {
-webkit-transform:translateX(0%) skewX(0deg);
transform:translateX(0%) skewX(0deg);
opacity:1;
}
}
@-ms-keyframes LightSpeedIn {
0% {
-ms-transform:translateX(100%) skewX(-30deg);
transform:translateX(100%) skewX(-30deg);
opacity:0;
}
60% {
-ms-transform:translateX(-20%) skewX(30deg);
transform:translateX(-20%) skewX(30deg);
opacity:1;
}
80% {
-ms-transform:translateX(0%) skewX(-15deg);
transform:translateX(0%) skewX(-15deg);
opacity:1;
}
100% {
-ms-transform:translateX(0%) skewX(0deg);
transform:translateX(0%) skewX(0deg);
opacity:1;
}
}
@-moz-keyframes LightSpeedIn {
0% {
-moz-transform:translateX(100%) skewX(-30deg);
transform:translateX(100%) skewX(-30deg);
opacity:0;
}
60% {
-moz-transform:translateX(-20%) skewX(30deg);
transform:translateX(-20%) skewX(30deg);
opacity:1;
}
80% {
-moz-transform:translateX(0%) skewX(-15deg);
transform:translateX(0%) skewX(-15deg);
opacity:1;
}
100% {
-moz-transform:translateX(0%) skewX(0deg);
transform:translateX(0%) skewX(0deg);
opacity:1;
}
}
@keyframes LightSpeedIn {
0% {
transform:translateX(100%) skewX(-30deg);
transform:translateX(100%) skewX(-30deg);
opacity:0;
}
60% {
transform:translateX(-20%) skewX(30deg);
transform:translateX(-20%) skewX(30deg);
opacity:1;
}
80% {
transform:translateX(0%) skewX(-15deg);
transform:translateX(0%) skewX(-15deg);
opacity:1;
}
100% {
transform:translateX(0%) skewX(0deg);
transform:translateX(0%) skewX(0deg);
opacity:1;
}
}
@-webkit-keyframes LightSpeedOut {
0% {
-webkit-transform:translateX(0%) skewX(0deg);
transform:translateX(0%) skewX(0deg);
opacity:1;
}
100% {
-webkit-transform:translateX(100%) skewX(-30deg);
transform:translateX(100%) skewX(-30deg);
opacity:0;
}
}
@-moz-keyframes LightSpeedOut {
0% {
-moz-transform:translateX(0%) skewX(0deg);
transform:translateX(0%) skewX(0deg);
opacity:1;
}
100% {
-moz-transform:translateX(100%) skewX(-30deg);
transform:translateX(100%) skewX(-30deg);
opacity:0;
}
}
@-ms-keyframes LightSpeedOut {
0% {
-ms-transform:translateX(0%) skewX(0deg);
transform:translateX(0%) skewX(0deg);
opacity:1;
}
100% {
-ms-transform:translateX(100%) skewX(-30deg);
transform:translateX(100%) skewX(-30deg);
opacity:0;
}
}
@keyframes LightSpeedOut {
0% {
transform:translateX(0%) skewX(0deg);
transform:translateX(0%) skewX(0deg);
opacity:1;
}
100% {
transform:translateX(100%) skewX(-30deg);
transform:translateX(100%) skewX(-30deg);
opacity:0;
}
}
@-webkit-keyframes Bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform:translateY(0);
}
40% {
-webkit-transform:translateY(-30px);
}
60% {
-webkit-transform:translateY(-15px);
}
}
@-moz-keyframes Bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform:translateY(0);
}
40% {
-moz-transform:translateY(-30px);
}
60% {
-moz-transform:translateY(-15px);
}
}
@-ms-keyframes Bounce {
0%, 20%, 50%, 80%, 100% {
-ms-transform:translateY(0);
}
40% {
-ms-transform:translateY(-30px);
}
60% {
-ms-transform:translateY(-15px);
}
}
@keyframes Bounce {
0%, 20%, 50%, 80%, 100% {
transform:translateY(0);
}
40% {
transform:translateY(-30px);
}
60% {
transform:translateY(-15px);
}
}
@-webkit-keyframes BounceIn {
0% {
opacity:0;
-webkit-transform:scale(0.3);
}
50% {
opacity:1;
-webkit-transform:scale(1.05);
}
70% {
-webkit-transform:scale(0.9);
}
100% {
-webkit-transform:scale(1);
}
}
@-moz-keyframes BounceIn {
0% {
opacity:0;
-moz-transform:scale(0.3);
}
50% {
opacity:1;
-moz-transform:scale(1.05);
}
70% {
-moz-transform:scale(0.9);
}
100% {
-moz-transform:scale(1);
}
}
@-ms-keyframes BounceIn {
0% {
opacity:0;
-ms-transform:scale(0.3);
}
50% {
opacity:1;
-ms-transform:scale(1.05);
}
70% {
-ms-transform:scale(0.9);
}
100% {
-ms-transform:scale(1);
}
}
@keyframes BounceIn {
0% {
opacity:0;
transform:scale(0.3);
}
50% {
opacity:1;
transform:scale(1.05);
}
70% {
transform:scale(0.9);
}
100% {
transform:scale(1);
}
}
@-webkit-keyframes BounceInT {
0% {
opacity:0;
-webkit-transform:translateY(-100px);
}
50% {
opacity:1;
-webkit-transform:translateY(30px);
}
70% {
-webkit-transform:translateY(-10px);
}
100% {
-webkit-transform:translateY(0px);
}
}
@-moz-keyframes BounceInT {
0% {
opacity:0;
-moz-transform:translateY(-100px);
}
60% {
opacity:1;
-moz-transform:translateY(30px);
}
80% {
-moz-transform:translateY(-10px);
}
100% {
-moz-transform:translateY(0);
}
}
@-ms-keyframes BounceInT {
0% {
opacity:0;
-ms-transform:translateY(-100px);
}
60% {
opacity:1;
-ms-transform:translateY(30px);
}
80% {
-ms-transform:translateY(-10px);
}
100% {
-ms-transform:translateY(0);
}
}
@keyframes BounceInT {
0% {
opacity:0;
transform:translateY(-100px);
}
60% {
opacity:1;
transform:translateY(30px);
}
80% {
transform:translateY(-10px);
}
100% {
transform:translateY(0);
}
}
@-webkit-keyframes BounceInR {
0% {
opacity:0;
-webkit-transform:translateX(100px);
}
60% {
opacity:1;
-webkit-transform:translateX(-30px);
}
80% {
-webkit-transform:translateX(10px);
}
100% {
-webkit-transform:translateX(0);
}
}
@-moz-keyframes BounceInR {
0% {
opacity:0;
-moz-transform:translateX(100px);
}
60% {
opacity:1;
-moz-transform:translateX(-30px);
}
80% {
-moz-transform:translateX(10px);
}
100% {
-moz-transform:translateX(0);
}
}
@-ms-keyframes BounceInR {
0% {
opacity:0;
-ms-transform:translateX(100px);
}
60% {
opacity:1;
-ms-transform:translateX(-30px);
}
80% {
-ms-transform:translateX(10px);
}
100% {
-ms-transform:translateX(0);
}
}
@keyframes BounceInR {
0% {
opacity:0;
transform:translateX(100px);
}
60% {
opacity:1;
transform:translateX(-30px);
}
80% {
transform:translateX(10px);
}
100% {
transform:translateX(0);
}
}
@-webkit-keyframes BounceInL {
0% {
opacity:0;
-webkit-transform:translateX(-100px);
}
60% {
opacity:1;
-webkit-transform:translateX(30px);
}
80% {
-webkit-transform:translateX(-10px);
}
100% {
-webkit-transform:translateX(0);
}
}
@-moz-keyframes BounceInL {
0% {
opacity:0;
-moz-transform:translateX(-100px);
}
60% {
opacity:1;
-moz-transform:translateX(30px);
}
80% {
-moz-transform:translateX(-10px);
}
100% {
-moz-transform:translateX(0);
}
}
@-ms-keyframes BounceInL {
0% {
opacity:0;
-ms-transform:translateX(-100px);
}
60% {
opacity:1;
-ms-transform:translateX(30px);
}
80% {
-ms-transform:translateX(-10px);
}
100% {
-ms-transform:translateX(0);
}
}
@keyframes BounceInL {
0% {
opacity:0;
transform:translateX(-100px);
}
60% {
opacity:1;
transform:translateX(30px);
}
80% {
transform:translateX(-10px);
}
100% {
transform:translateX(0);
}
}
@-webkit-keyframes BounceInB {
0% {
opacity:0;
-webkit-transform:translateY(100px);
}
60% {
opacity:1;
-webkit-transform:translateY(-30px);
}
80% {
-webkit-transform:translateY(10px);
}
100% {
-webkit-transform:translateY(0);
}
}
@-moz-keyframes BounceInB {
0% {
opacity:0;
-moz-transform:translateY(100px);
}
60% {
opacity:1;
-moz-transform:translateY(-30px);
}
80% {
-moz-transform:translateY(10px);
}
100% {
-moz-transform:translateY(0);
}
}
@-ms-keyframes BounceInB {
0% {
opacity:0;
-ms-transform:translateY(100px);
}
60% {
opacity:1;
-ms-transform:translateY(-30px);
}
80% {
-ms-transform:translateY(10px);
}
100% {
-ms-transform:translateY(0);
}
}
@keyframes BounceInB {
0% {
opacity:0;
transform:translateY(100px);
}
60% {
opacity:1;
transform:translateY(-30px);
}
80% {
transform:translateY(10px);
}
100% {
transform:translateY(0);
}
}
@-webkit-keyframes BounceOut {
0% {
-webkit-transform:scale(1);
}
50% {
-webkit-transform:scale(0.9);
}
70% {
opacity:1;
-webkit-transform:scale(1.05);
}
100% {
opacity:0;
-webkit-transform:scale(0.3);
}
}
@-moz-keyframes BounceOut {
0% {
-moz-transform:scale(1);
}
50% {
-moz-transform:scale(0.9);
}
70% {
opacity:1;
-moz-transform:scale(1.05);
}
100% {
opacity:0;
-moz-transform:scale(0.3);
}
}
@-ms-keyframes BounceOut {
0% {
-ms-transform:scale(1);
}
50% {
-ms-transform:scale(0.9);
}
70% {
opacity:1;
-ms-transform:scale(1.05);
}
100% {
opacity:0;
-ms-transform:scale(0.3);
}
}
@keyframes BounceOut {
0% {
transform:scale(1);
}
50% {
transform:scale(0.9);
}
70% {
opacity:1;
transform:scale(1.05);
}
100% {
opacity:0;
transform:scale(0.3);
}
}
@-webkit-keyframes BounceOutT {
0% {
-webkit-transform:translateY(0);
}
20% {
opacity:1;
-webkit-transform:translateY(20px);
}
100% {
opacity:0;
-webkit-transform:translateY(-100px);
}
}
@-moz-keyframes BounceOutT {
0% {
-moz-transform:translateY(0);
}
20% {
opacity:1;
-moz-transform:translateY(20px);
}
100% {
opacity:0;
-moz-transform:translateY(-100px);
}
}
@-ms-keyframes BounceOutT {
0% {
-ms-transform:translateY(0);
}
20% {
opacity:1;
-ms-transform:translateY(20px);
}
100% {
opacity:0;
-ms-transform:translateY(-100px);
}
}
@keyframes BounceOutT {
0% {
transform:translateY(0);
}
20% {
opacity:1;
transform:translateY(20px);
}
100% {
opacity:0;
transform:translateY(-100px);
}
}
@-webkit-keyframes BounceOutR {
0% {
-webkit-transform:translateX(0);
}
20% {
opacity:1;
-webkit-transform:translateX(-20px);
}
100% {
opacity:0;
-webkit-transform:translateX(100px);
}
}
@-moz-keyframes BounceOutR {
0% {
-moz-transform:translateX(0);
}
20% {
opacity:1;
-moz-transform:translateX(-20px);
}
100% {
opacity:0;
-moz-transform:translateX(100px);
}
}
@-ms-keyframes BounceOutR {
0% {
-ms-transform:translateX(0);
}
20% {
opacity:1;
-ms-transform:translateX(-20px);
}
100% {
opacity:0;
-ms-transform:translateX(100px);
}
}
@keyframes BounceOutR {
0% {
transform:translateX(0);
}
20% {
opacity:1;
transform:translateX(-20px);
}
100% {
opacity:0;
transform:translateX(100px);
}
}
@-webkit-keyframes BounceOutL {
0% {
-webkit-transform:translateX(0);
}
20% {
opacity:1;
-webkit-transform:translateX(20px);
}
100% {
opacity:0;
-webkit-transform:translateX(-100px);
}
}
@-moz-keyframes BounceOutL {
0% {
-moz-transform:translateX(0);
}
20% {
opacity:1;
-moz-transform:translateX(20px);
}
100% {
opacity:0;
-moz-transform:translateX(-100px);
}
}
@-ms-keyframes BounceOutL {
0% {
-ms-transform:translateX(0);
}
20% {
opacity:1;
-ms-transform:translateX(20px);
}
100% {
opacity:0;
-ms-transform:translateX(-100px);
}
}
@keyframes BounceOutL {
0% {
transform:translateX(0);
}
20% {
opacity:1;
transform:translateX(20px);
}
100% {
opacity:0;
transform:translateX(-200px);
}
}
@-webkit-keyframes BounceOutB {
0% {
-webkit-transform:translateY(0);
}
20% {
opacity:1;
-webkit-transform:translateY(-20px);
}
100% {
opacity:0;
-webkit-transform:translateY(100px);
}
}
@-moz-keyframes BounceOutB {
0% {
-moz-transform:translateY(0);
}
20% {
opacity:1;
-moz-transform:translateY(-20px);
}
100% {
opacity:0;
-moz-transform:translateY(100px);
}
}
@-ms-keyframes BounceOutB {
0% {
-ms-transform:translateY(0);
}
20% {
opacity:1;
-ms-transform:translateY(-20px);
}
100% {
opacity:0;
-ms-transform:translateY(100px);
}
}
@keyframes BounceOutB {
0% {
transform:translateY(0);
}
20% {
opacity:1;
transform:translateY(-20px);
}
100% {
opacity:0;
transform:translateY(100px);
}
}
@-webkit-keyframes FadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
@-moz-keyframes FadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
@-ms-keyframes FadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
@keyframes FadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
@-webkit-keyframes FadeInT {
0% {
opacity:0;
-webkit-transform:translateY(-100px);
}
100% {
opacity:1;
-webkit-transform:translateY(0);
}
}
@-moz-keyframes FadeInT {
0% {
opacity:0;
-moz-transform:translateY(-100px);
}
100% {
opacity:1;
-moz-transform:translateY(0);
}
}
@-ms-keyframes FadeInT {
0% {
opacity:0;
-ms-transform:translateY(-100px);
}
100% {
opacity:1;
-ms-transform:translateY(0);
}
}
@keyframes FadeInT {
0% {
opacity:0;
transform:translateY(-100px);
}
100% {
opacity:1;
transform:translateY(0);
}
}
@-webkit-keyframes FadeInL {
0% {
opacity:0;
-webkit-transform:translateX(-100px);
}
100% {
opacity:1;
-webkit-transform:translateX(0);
}
}
@-moz-keyframes FadeInL {
0% {
opacity:0;
-moz-transform:translateX(-100px);
}
100% {
opacity:1;
-moz-transform:translateX(0);
}
}
@-ms-keyframes FadeInL {
0% {
opacity:0;
-ms-transform:translateX(-100px);
}
100% {
opacity:1;
-ms-transform:translateX(0);
}
}
@keyframes FadeInL {
0% {
opacity:0;
transform:translateX(-100px);
}
100% {
opacity:1;
transform:translateX(0);
}
}
@-webkit-keyframes FadeInR {
0% {
opacity:0;
-webkit-transform:translateX(100px);
}
100% {
opacity:1;
-webkit-transform:translateX(0);
}
}
@-moz-keyframes FadeInR {
0% {
opacity:0;
-moz-transform:translateX(100px);
}
100% {
opacity:1;
-moz-transform:translateX(0);
}
}
@-ms-keyframes FadeInR {
0% {
opacity:0;
-ms-transform:translateX(100px);
}
100% {
opacity:1;
-ms-transform:translateX(0);
}
}
@keyframes FadeInR {
0% {
opacity:0;
transform:translateX(100px);
}
100% {
opacity:1;
transform:translateX(0);
}
}
@-webkit-keyframes FadeInB {
0% {
opacity:0;
-webkit-transform:translateY(100px);
}
100% {
opacity:1;
-webkit-transform:translateY(0);
}
}
@-moz-keyframes FadeInB {
0% {
opacity:0;
-moz-transform:translateY(100px);
}
100% {
opacity:1;
-moz-transform:translateY(0);
}
}
@-ms-keyframes FadeInB {
0% {
opacity:0;
-ms-transform:translateY(100px);
}
100% {
opacity:1;
-ms-transform:translateY(0);
}
}
@keyframes FadeInB {
0% {
opacity:0;
transform:translateY(100px);
}
100% {
opacity:1;
transform:translateY(0);
}
}
@-webkit-keyframes FadeOut {
0% {
opacity:1;
}
100% {
opacity:0;
}
}
@-moz-keyframes FadeOut {
0% {
opacity:1;
}
100% {
opacity:0;
}
}
@-ms-keyframes FadeOut {
0% {
opacity:1;
}
100% {
opacity:0;
}
}
@keyframes FadeOut {
0% {
opacity:1;
}
100% {
opacity:0;
}
}
@-webkit-keyframes FadeOutT {
0% {
opacity:1;
-webkit-transform:translateY(0);
}
100% {
opacity:0;
-webkit-transform:translateY(-100px);
}
}
@-moz-keyframes FadeOutT {
0% {
opacity:1;
-moz-transform:translateY(0);
}
100% {
opacity:0;
-moz-transform:translateY(-100px);
}
}
@-ms-keyframes FadeOutT {
0% {
opacity:1;
-ms-transform:translateY(0);
}
100% {
opacity:0;
-ms-transform:translateY(-100px);
}
}
@keyframes FadeOutT {
0% {
opacity:1;
transform:translateY(0);
}
100% {
opacity:0;
transform:translateY(-100px);
}
}
@-webkit-keyframes FadeOutL {
0% {
opacity:1;
-webkit-transform:translateX(0);
}
100% {
opacity:0;
-webkit-transform:translateX(-100px);
}
}
@-moz-keyframes FadeOutL {
0% {
opacity:1;
-moz-transform:translateX(0);
}
100% {
opacity:0;
-moz-transform:translateX(-100px);
}
}
@-ms-keyframes FadeOutL {
0% {
opacity:1;
-ms-transform:translateX(0);
}
100% {
opacity:0;
-ms-transform:translateX(-100px);
}
}
@keyframes FadeOutL {
0% {
opacity:1;
transform:translateX(0);
}
100% {
opacity:0;
transform:translateX(-100px);
}
}
@-webkit-keyframes FadeOutR {
0% {
opacity:1;
-webkit-transform:translateX(0);
}
100% {
opacity:0;
-webkit-transform:translateX(100px);
}
}
@-moz-keyframes FadeOutR {
0% {
opacity:1;
-moz-transform:translateX(0);
}
100% {
opacity:0;
-moz-transform:translateX(100px);
}
}
@-ms-keyframes FadeOutR {
0% {
opacity:1;
-ms-transform:translateX(0);
}
100% {
opacity:0;
-ms-transform:translateX(100px);
}
}
@keyframes FadeOutR {
0% {
opacity:1;
transform:translateX(0);
}
100% {
opacity:0;
transform:translateX(100px);
}
}
@-webkit-keyframes FadeOutB {
0% {
opacity:1;
-webkit-transform:translateY(0);
}
100% {
opacity:0;
-webkit-transform:translateY(100px);
}
}
@-moz-keyframes FadeOutB {
0% {
opacity:1;
-moz-transform:translateY(0);
}
100% {
opacity:0;
-moz-transform:translateY(100px);
}
}
@-ms-keyframes FadeOutB {
0% {
opacity:1;
-ms-transform:translateY(0);
}
100% {
opacity:0;
-ms-transform:translateY(100px);
}
}
@keyframes FadeOutB {
0% {
opacity:1;
transform:translateY(0);
}
100% {
opacity:0;
transform:translateY(100px);
}
}
@-webkit-keyframes Flip {
0% {
-webkit-transform:perspective(400px) rotateY(0);
-webkit-animation-timing-function:ease-out;
}
40% {
-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);
-webkit-animation-timing-function:ease-out;
}
50% {
-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-webkit-animation-timing-function:ease-in;
}
80% {
-webkit-transform:perspective(400px) rotateY(360deg) scale(0.95);
-webkit-animation-timing-function:ease-in;
}
100% {
-webkit-transform:perspective(400px) scale(1);
-webkit-animation-timing-function:ease-in;
}
}
@-moz-keyframes Flip {
0% {
-moz-transform:perspective(400px) rotateY(0);
-moz-animation-timing-function:ease-out;
}
40% {
-moz-transform:perspective(400px) translateZ(150px) rotateY(170deg);
-moz-animation-timing-function:ease-out;
}
50% {
-moz-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-moz-animation-timing-function:ease-in;
}
80% {
-moz-transform:perspective(400px) rotateY(360deg) scale(0.95);
-moz-animation-timing-function:ease-in;
}
100% {
-moz-transform:perspective(400px) scale(1);
-moz-animation-timing-function:ease-in;
}
}
@-ms-keyframes Flip {
0% {
-ms-transform:perspective(400px) rotateY(0);
-ms-animation-timing-function:ease-out;
}
40% {
-ms-transform:perspective(400px) translateZ(150px) rotateY(170deg);
-ms-animation-timing-function:ease-out;
}
50% {
-ms-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-ms-animation-timing-function:ease-in;
}
80% {
-ms-transform:perspective(400px) rotateY(360deg) scale(0.95);
-ms-animation-timing-function:ease-in;
}
100% {
-ms-transform:perspective(400px) scale(1);
-ms-animation-timing-function:ease-in;
}
}
@keyframes Flip {
0% {
transform:perspective(400px) rotateY(0);
animation-timing-function:ease-out;
}
40% {
transform:perspective(400px) translateZ(150px) rotateY(170deg);
animation-timing-function:ease-out;
}
50% {
transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
animation-timing-function:ease-in;
}
80% {
transform:perspective(400px) rotateY(360deg) scale(0.95);
animation-timing-function:ease-in;
}
100% {
transform:perspective(400px) scale(1);
animation-timing-function:ease-in;
}
}
@-webkit-keyframes FlipInX {
0% {
-webkit-transform:perspective(400px) rotateX(90deg);
opacity:0;
}
40% {
-webkit-transform:perspective(400px) rotateX(-10deg);
}
70% {
-webkit-transform:perspective(400px) rotateX(10deg);
}
100% {
-webkit-transform:perspective(400px) rotateX(0);
opacity:1;
}
}
@-moz-keyframes FlipInX {
0% {
-moz-transform:perspective(400px) rotateX(90deg);
opacity:0;
}
40% {
-moz-transform:perspective(400px) rotateX(-10deg);
}
70% {
-moz-transform:perspective(400px) rotateX(10deg);
}
100% {
-moz-transform:perspective(400px) rotateX(0);
opacity:1;
}
}
@-ms-keyframes FlipInX {
0% {
-ms-transform:perspective(400px) rotateX(90deg);
opacity:0;
}
40% {
-ms-transform:perspective(400px) rotateX(-10deg);
}
70% {
-ms-transform:perspective(400px) rotateX(10deg);
}
100% {
-ms-transform:perspective(400px) rotateX(0);
opacity:1;
}
}
@keyframes FlipInX {
0% {
transform:perspective(400px) rotateX(90deg);
opacity:0;
}
40% {
transform:perspective(400px) rotateX(-10deg);
}
70% {
transform:perspective(400px) rotateX(10deg);
}
100% {
transform:perspective(400px) rotateX(0);
opacity:1;
}
}
@-webkit-keyframes FlipInY {
0% {
-webkit-transform:perspective(400px) rotateY(90deg);
opacity:0;
}
40% {
-webkit-transform:perspective(400px) rotateY(-10deg);
}
70% {
-webkit-transform:perspective(400px) rotateY(10deg);
}
100% {
-webkit-transform:perspective(400px) rotateY(0);
opacity:1;
}
}
@-moz-keyframes FlipInY {
0% {
-moz-transform:perspective(400px) rotateY(90deg);
opacity:0;
}
40% {
-moz-transform:perspective(400px) rotateY(-10deg);
}
70% {
-moz-transform:perspective(400px) rotateY(10deg);
}
100% {
-moz-transform:perspective(400px) rotateY(0);
opacity:1;
}
}
@-ms-keyframes FlipInY {
0% {
-ms-transform:perspective(400px) rotateY(90deg);
opacity:0;
}
40% {
-ms-transform:perspective(400px) rotateY(-10deg);
}
70% {
-ms-transform:perspective(400px) rotateY(10deg);
}
100% {
-ms-transform:perspective(400px) rotateY(0);
opacity:1;
}
}
@keyframes FlipInY {
0% {
transform:perspective(400px) rotateY(90deg);
opacity:0;
}
40% {
transform:perspective(400px) rotateY(-10deg);
}
70% {
transform:perspective(400px) rotateY(10deg);
}
100% {
transform:perspective(400px) rotateY(0);
opacity:1;
}
}
@-webkit-keyframes FlipOutX {
0% {
-webkit-transform:perspective(400px) rotateX(0);
opacity:1;
}
100% {
-webkit-transform:perspective(400px) rotateX(90deg);
opacity:0;
}
}
@-moz-keyframes FlipOutX {
0% {
-moz-transform:perspective(400px) rotateX(0);
opacity:1;
}
100% {
-moz-transform:perspective(400px) rotateX(90deg);
opacity:0;
}
}
@-ms-keyframes FlipOutX {
0% {
-ms-transform:perspective(400px) rotateX(0);
opacity:1;
}
100% {
-ms-transform:perspective(400px) rotateX(90deg);
opacity:0;
}
}
@keyframes FlipOutX {
0% {
transform:perspective(400px) rotateX(0);
opacity:1;
}
100% {
transform:perspective(400px) rotateX(90deg);
opacity:0;
}
}
@-webkit-keyframes FlipOutY {
0% {
-webkit-transform:perspective(400px) rotateY(0);
opacity:1;
}
100% {
-webkit-transform:perspective(400px) rotateY(90deg);
opacity:0;
}
}
@-moz-keyframes FlipOutY {
0% {
-moz-transform:perspective(400px) rotateY(0);
opacity:1;
}
100% {
-moz-transform:perspective(400px) rotateY(90deg);
opacity:0;
}
}
@-ms-keyframes FlipOutY {
0% {
-ms-transform:perspective(400px) rotateY(0);
opacity:1;
}
100% {
-ms-transform:perspective(400px) rotateY(90deg);
opacity:0;
}
}
@keyframes FlipOutY {
0% {
transform:perspective(400px) rotateY(0);
opacity:1;
}
100% {
transform:perspective(400px) rotateY(90deg);
opacity:0;
}
}
@-webkit-keyframes Flash {
0%, 50%, 100% {
opacity:1;
}
25%, 75% {
opacity:0;
}
}
@-moz-keyframes Flash {
0%, 50%, 100% {
opacity:1;
}
25%, 75% {
opacity:0;
}
}
@-ms-keyframes Flash {
0%, 50%, 100% {
opacity:1;
}
25%, 75% {
opacity:0;
}
}
@keyframes Flash {
0%, 50%, 100% {
opacity:1;
}
25%, 75% {
opacity:0;
}
}
@-webkit-keyframes Tada {
0% {
-webkit-transform:scale(1);
transform:scale(1);
}
10%, 20% {
-webkit-transform:scale(0.9) rotate(-3deg);
transform:scale(0.9) rotate(-3deg);
}
30%, 50%, 70%, 90% {
-webkit-transform:scale(1.1) rotate(3deg);
transform:scale(1.1) rotate(3deg);
}
40%, 60%, 80% {
-webkit-transform:scale(1.1) rotate(-3deg);
transform:scale(1.1) rotate(-3deg);
}
100% {
-webkit-transform:scale(1) rotate(0);
transform:scale(1) rotate(0);
}
}
@-moz-keyframes Tada {
0% {
-moz-transform:scale(1);
transform:scale(1);
}
10%, 20% {
-moz-transform:scale(0.9) rotate(-3deg);
transform:scale(0.9) rotate(-3deg);
}
30%, 50%, 70%, 90% {
-moz-transform:scale(1.1) rotate(3deg);
transform:scale(1.1) rotate(3deg);
}
40%, 60%, 80% {
-moz-transform:scale(1.1) rotate(-3deg);
transform:scale(1.1) rotate(-3deg);
}
100% {
-moz-transform:scale(1) rotate(0);
transform:scale(1) rotate(0);
}
}
@-ms-keyframes Tada {
0% {
-ms-transform:scale(1);
transform:scale(1);
}
10%, 20% {
-ms-transform:scale(0.9) rotate(-3deg);
transform:scale(0.9) rotate(-3deg);
}
30%, 50%, 70%, 90% {
-ms-transform:scale(1.1) rotate(3deg);
transform:scale(1.1) rotate(3deg);
}
40%, 60%, 80% {
-ms-transform:scale(1.1) rotate(-3deg);
transform:scale(1.1) rotate(-3deg);
}
100% {
-ms-transform:scale(1) rotate(0);
transform:scale(1) rotate(0);
}
}
@keyframes Tada {
0% {
transform:scale(1);
transform:scale(1);
}
10%, 20% {
transform:scale(0.9) rotate(-3deg);
transform:scale(0.9) rotate(-3deg);
}
30%, 50%, 70%, 90% {
transform:scale(1.1) rotate(3deg);
transform:scale(1.1) rotate(3deg);
}
40%, 60%, 80% {
transform:scale(1.1) rotate(-3deg);
transform:scale(1.1) rotate(-3deg);
}
100% {
transform:scale(1) rotate(0);
transform:scale(1) rotate(0);
}
}
@-webkit-keyframes Shake {
0%, 100% {
-webkit-transform:translateX(0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform:translateX(-10px);
}
20%, 40%, 60%, 80% {
-webkit-transform:translateX(10px);
}
}
@-moz-keyframes Shake {
0%, 100% {
-moz-transform:translateX(0);
}
10%, 30%, 50%, 70%, 90% {
-moz-transform:translateX(-10px);
}
20%, 40%, 60%, 80% {
-moz-transform:translateX(10px);
}
}
@-ms-keyframes Shake {
0%, 100% {
-ms-transform:translateX(0);
}
10%, 30%, 50%, 70%, 90% {
-ms-transform:translateX(-10px);
}
20%, 40%, 60%, 80% {
-ms-transform:translateX(10px);
}
}
@keyframes Shake {
0%, 100% {
transform:translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform:translateX(-10px);
}
20%, 40%, 60%, 80% {
transform:translateX(10px);
}
}
@-webkit-keyframes Wobble {
0% {
-webkit-transform:translateX(0);
}
15% {
-webkit-transform:translateX(-100px) rotate(-5deg);
}
30% {
-webkit-transform:translateX(80px) rotate(3deg);
}
45% {
-webkit-transform:translateX(-65px) rotate(-3deg);
}
60% {
-webkit-transform:translateX(40px) rotate(2deg);
}
75% {
-webkit-transform:translateX(-20px) rotate(-1deg);
}
100% {
-webkit-transform:translateX(0);
}
}
@-moz-keyframes Wobble {
0% {
-moz-transform:translateX(0);
}
15% {
-moz-transform:translateX(-100px) rotate(-5deg);
}
30% {
-moz-transform:translateX(80px) rotate(3deg);
}
45% {
-moz-transform:translateX(-65px) rotate(-3deg);
}
60% {
-moz-transform:translateX(40px) rotate(2deg);
}
75% {
-moz-transform:translateX(-20px) rotate(-1deg);
}
100% {
-moz-transform:translateX(0);
}
}
@-ms-keyframes Wobble {
0% {
-ms-transform:translateX(0);
}
15% {
-ms-transform:translateX(-100px) rotate(-5deg);
}
30% {
-ms-transform:translateX(80px) rotate(3deg);
}
45% {
-ms-transform:translateX(-65px) rotate(-3deg);
}
60% {
-ms-transform:translateX(40px) rotate(2deg);
}
75% {
-ms-transform:translateX(-20px) rotate(-1deg);
}
100% {
-ms-transform:translateX(0);
}
}
@keyframes Wobble {
0% {
transform:translateX(0);
}
15% {
transform:translateX(-100px) rotate(-5deg);
}
30% {
transform:translateX(80px) rotate(3deg);
}
45% {
transform:translateX(-65px) rotate(-3deg);
}
60% {
transform:translateX(40px) rotate(2deg);
}
75% {
transform:translateX(-20px) rotate(-1deg);
}
100% {
transform:translateX(0);
}
}

举报 © 著作权归作者所有
喜欢 | 已喜欢 |
收录到我的专题 | 842
程序员
写了 39614 字，被 6 人关注