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 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
0% {opacity: 0;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
0% {opacity: 1;}
|
||||
100% {opacity: 0;}
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeInUp {
|
||||
|
|
@ -395,101 +385,35 @@
|
|||
}
|
||||
|
||||
@-webkit-keyframes flash {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
25% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
75% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
0% {opacity: 1;}
|
||||
25% {opacity: 0;}
|
||||
50% {opacity: 1;}
|
||||
75% {opacity: 0;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bounce {
|
||||
0% {
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
|
||||
20% {
|
||||
-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);
|
||||
}
|
||||
0% {-webkit-transform: translateY(0);}
|
||||
20% {-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 {
|
||||
0% {
|
||||
-webkit-transform: translateX(0);
|
||||
}
|
||||
|
||||
10% {
|
||||
-webkit-transform: translateX(-10px);
|
||||
}
|
||||
|
||||
20% {
|
||||
-webkit-transform: translateX(10px);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
0% {-webkit-transform: translateX(0);}
|
||||
10% {-webkit-transform: translateX(-10px);}
|
||||
20% {-webkit-transform: translateX(10px);}
|
||||
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 {
|
||||
|
|
@ -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 {
|
||||
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 {
|
||||
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 {
|
||||
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; }
|
||||
.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; }
|
||||
|
|
@ -2574,4 +2554,5 @@
|
|||
.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; }
|
||||
.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