mirror of
https://github.com/animate-css/animate.css.git
synced 2024-11-17 17:45:17 +01:00
New! Exciting! 'tada' animation!
This commit is contained in:
Dan Eden
parent
2fd5671408
commit
137af77449
1 changed files with 85 additions and 104 deletions
189
animate.css
vendored
189
animate.css
vendored
|
|
@ -1,21 +1,11 @@
|
||||||
@-webkit-keyframes fadeIn {
|
@-webkit-keyframes fadeIn {
|
||||||
0% {
|
0% {opacity: 0;}
|
||||||
opacity: 0;
|
100% {opacity: 1;}
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes fadeOut {
|
@-webkit-keyframes fadeOut {
|
||||||
0% {
|
0% {opacity: 1;}
|
||||||
opacity: 1;
|
100% {opacity: 0;}
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes fadeInUp {
|
@-webkit-keyframes fadeInUp {
|
||||||
|
|
@ -395,101 +385,35 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes flash {
|
@-webkit-keyframes flash {
|
||||||
0% {
|
0% {opacity: 1;}
|
||||||
opacity: 1;
|
25% {opacity: 0;}
|
||||||
}
|
50% {opacity: 1;}
|
||||||
|
75% {opacity: 0;}
|
||||||
25% {
|
100% {opacity: 1;}
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
75% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes bounce {
|
@-webkit-keyframes bounce {
|
||||||
0% {
|
0% {-webkit-transform: translateY(0);}
|
||||||
-webkit-transform: translateY(0);
|
20% {-webkit-transform: translateY(0);}
|
||||||
}
|
40% {-webkit-transform: translateY(-30px);}
|
||||||
|
50% {-webkit-transform: translateY(0);}
|
||||||
20% {
|
60% {-webkit-transform: translateY(-15px);}
|
||||||
-webkit-transform: translateY(0);
|
80% {-webkit-transform: translateY(0);}
|
||||||
}
|
100% {-webkit-transform: translateY(0);}
|
||||||
|
|
||||||
40% {
|
|
||||||
-webkit-transform: translateY(-30px);
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
-webkit-transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
60% {
|
|
||||||
-webkit-transform: translateY(-15px);
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
-webkit-transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
-webkit-transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes shake {
|
@-webkit-keyframes shake {
|
||||||
0% {
|
0% {-webkit-transform: translateX(0);}
|
||||||
-webkit-transform: translateX(0);
|
10% {-webkit-transform: translateX(-10px);}
|
||||||
}
|
20% {-webkit-transform: translateX(10px);}
|
||||||
|
30% {-webkit-transform: translateX(-10px);}
|
||||||
10% {
|
40% {-webkit-transform: translateX(10px);}
|
||||||
-webkit-transform: translateX(-10px);
|
50% {-webkit-transform: translateX(-10px);}
|
||||||
}
|
60% {-webkit-transform: translateX(10px);}
|
||||||
|
70% {-webkit-transform: translateX(-10px);}
|
||||||
20% {
|
80% {-webkit-transform: translateX(10px);}
|
||||||
-webkit-transform: translateX(10px);
|
90% {-webkit-transform: translateX(-10px);}
|
||||||
}
|
100% {-webkit-transform: translateX(0);}
|
||||||
|
|
||||||
30% {
|
|
||||||
-webkit-transform: translateX(-10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
40% {
|
|
||||||
-webkit-transform: translateX(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
-webkit-transform: translateX(-10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
60% {
|
|
||||||
-webkit-transform: translateX(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
70% {
|
|
||||||
-webkit-transform: translateX(-10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
-webkit-transform: translateX(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
90% {
|
|
||||||
-webkit-transform: translateX(-10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
-webkit-transform: translateX(0);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes rotateInDownLeft {
|
@-webkit-keyframes rotateInDownLeft {
|
||||||
|
|
@ -632,6 +556,20 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes tada {
|
||||||
|
0% {-webkit-transform: scale(1);}
|
||||||
|
10% {-webkit-transform: scale(0.9) rotate(-3deg);}
|
||||||
|
20% {-webkit-transform: scale(0.9) rotate(-3deg);}
|
||||||
|
30% {-webkit-transform: scale(1.1) rotate(3deg);}
|
||||||
|
40% {-webkit-transform: scale(1.1) rotate(-3deg);}
|
||||||
|
50% {-webkit-transform: scale(1.1) rotate(3deg);}
|
||||||
|
60% {-webkit-transform: scale(1.1) rotate(-3deg);}
|
||||||
|
70% {-webkit-transform: scale(1.1) rotate(3deg);}
|
||||||
|
80% {-webkit-transform: scale(1.1) rotate(-3deg);}
|
||||||
|
90% {-webkit-transform: scale(1.1) rotate(3deg);}
|
||||||
|
100% {-webkit-transform: scale(1) rotate(0);}
|
||||||
|
}
|
||||||
|
|
||||||
@-moz-keyframes fadeIn {
|
@-moz-keyframes fadeIn {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
@ -1266,6 +1204,20 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@-moz-keyframes tada {
|
||||||
|
0% {-moz-transform: scale(1);}
|
||||||
|
10% {-moz-transform: scale(0.9) rotate(-3deg);}
|
||||||
|
20% {-moz-transform: scale(0.9) rotate(-3deg);}
|
||||||
|
30% {-moz-transform: scale(1.1) rotate(3deg);}
|
||||||
|
40% {-moz-transform: scale(1.1) rotate(-3deg);}
|
||||||
|
50% {-moz-transform: scale(1.1) rotate(3deg);}
|
||||||
|
60% {-moz-transform: scale(1.1) rotate(-3deg);}
|
||||||
|
70% {-moz-transform: scale(1.1) rotate(3deg);}
|
||||||
|
80% {-moz-transform: scale(1.1) rotate(-3deg);}
|
||||||
|
90% {-moz-transform: scale(1.1) rotate(3deg);}
|
||||||
|
100% {-moz-transform: scale(1) rotate(0);}
|
||||||
|
}
|
||||||
|
|
||||||
@-ms-keyframes fadeIn {
|
@-ms-keyframes fadeIn {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
@ -1900,6 +1852,20 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@-ms-keyframes tada {
|
||||||
|
0% {-ms-transform: scale(1);}
|
||||||
|
10% {-ms-transform: scale(0.9) rotate(-3deg);}
|
||||||
|
20% {-ms-transform: scale(0.9) rotate(-3deg);}
|
||||||
|
30% {-ms-transform: scale(1.1) rotate(3deg);}
|
||||||
|
40% {-ms-transform: scale(1.1) rotate(-3deg);}
|
||||||
|
50% {-ms-transform: scale(1.1) rotate(3deg);}
|
||||||
|
60% {-ms-transform: scale(1.1) rotate(-3deg);}
|
||||||
|
70% {-ms-transform: scale(1.1) rotate(3deg);}
|
||||||
|
80% {-ms-transform: scale(1.1) rotate(-3deg);}
|
||||||
|
90% {-ms-transform: scale(1.1) rotate(3deg);}
|
||||||
|
100% {-ms-transform: scale(1) rotate(0);}
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes fadeIn {
|
@keyframes fadeIn {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
@ -2534,6 +2500,20 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes tada {
|
||||||
|
0% {transform: scale(1);}
|
||||||
|
10% {transform: scale(0.9) rotate(-3deg);}
|
||||||
|
20% {transform: scale(0.9) rotate(-3deg);}
|
||||||
|
30% {transform: scale(1.1) rotate(3deg);}
|
||||||
|
40% {transform: scale(1.1) rotate(-3deg);}
|
||||||
|
50% {transform: scale(1.1) rotate(3deg);}
|
||||||
|
60% {transform: scale(1.1) rotate(-3deg);}
|
||||||
|
70% {transform: scale(1.1) rotate(3deg);}
|
||||||
|
80% {transform: scale(1.1) rotate(-3deg);}
|
||||||
|
90% {transform: scale(1.1) rotate(3deg);}
|
||||||
|
100% {transform: scale(1) rotate(0);}
|
||||||
|
}
|
||||||
|
|
||||||
.flash { -webkit-animation-name: flash; -moz-animation-name: flash; -ms-animation-name: flash; animation-name: flash; }
|
.flash { -webkit-animation-name: flash; -moz-animation-name: flash; -ms-animation-name: flash; animation-name: flash; }
|
||||||
.fadeIn { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -ms-animation-name: fadeIn; animation-name: fadeIn; }
|
.fadeIn { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -ms-animation-name: fadeIn; animation-name: fadeIn; }
|
||||||
.fadeInUp { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -ms-animation-name: fadeInUp; animation-name: fadeInUp; }
|
.fadeInUp { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -ms-animation-name: fadeInUp; animation-name: fadeInUp; }
|
||||||
|
|
@ -2574,4 +2554,5 @@
|
||||||
.rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; -moz-animation-name: rotateOutUpLeft; -ms-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; }
|
.rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; -moz-animation-name: rotateOutUpLeft; -ms-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; }
|
||||||
.rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; -moz-animation-name: rotateOutUpRight; -ms-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; }
|
.rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; -moz-animation-name: rotateOutUpRight; -ms-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; }
|
||||||
.rotateIn { -webkit-animation-name: rotateIn; -moz-animation-name: rotateIn; -ms-animation-name: rotateIn; animation-name: rotateIn; }
|
.rotateIn { -webkit-animation-name: rotateIn; -moz-animation-name: rotateIn; -ms-animation-name: rotateIn; animation-name: rotateIn; }
|
||||||
.rotateOut { -webkit-animation-name: rotateOut; -moz-animation-name: rotateOut; -ms-animation-name: rotateOut; animation-name: rotateOut; }
|
.rotateOut { -webkit-animation-name: rotateOut; -moz-animation-name: rotateOut; -ms-animation-name: rotateOut; animation-name: rotateOut; }
|
||||||
|
.tada { -webkit-animation-name: tada; -moz-animation-name: tada; -ms-animation-name: tada; animation-name: tada; }
|
||||||
Loading…
Reference in a new issue