Robot
/
animate.css
mirror of https://github.com/animate-css/animate.css.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Unified formatting across files 

indent_style = space
indent_size = 2
insert_final_newline = true
each line within { } to specify single rule
This commit is contained in:
Sarbbottam Bandyopadhyay 2014-02-24 02:09:02 +05:30
parent 8897f6e799
commit 9310cf98ed
63 changed files with 301 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
source/attention_seekers/bounce.css
View File

@ -1,7 +1,15 @@
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
.bounce {

9
source/attention_seekers/flash.css
View File

@ -1,6 +1,11 @@
@keyframes flash {
0%, 50%, 100% {opacity: 1;}
25%, 75% {opacity: 0;}
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
.flash {

14
source/attention_seekers/pulse.css
View File

@ -1,9 +1,17 @@
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.pulse {

24
source/attention_seekers/rubberBand.css
View File

@ -1,9 +1,23 @@
@keyframes rubberBand {
0% { transform: scale(1); }
30% { transform: scaleX(1.25) scaleY(0.75); }
40% { transform: scaleX(0.75) scaleY(1.25); }
60% { transform: scaleX(1.15) scaleY(0.85); }
100% { transform: scale(1); }
0% {
transform: scale(1);
}
30% {
transform: scaleX(1.25) scaleY(0.75);
}
40% {
transform: scaleX(0.75) scaleY(1.25);
}
60% {
transform: scaleX(1.15) scaleY(0.85);
}
100% {
transform: scale(1);
}
}
.rubberBand {

14
source/attention_seekers/shake.css
View File

@ -1,7 +1,15 @@
@keyframes shake {
0%, 100% {transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
20%, 40%, 60%, 80% {transform: translateX(10px);}
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
transform: translateX(10px);
}
}
.shake {

24
source/attention_seekers/swing.css
View File

@ -1,9 +1,23 @@
@keyframes swing {
20% { transform: rotate(15deg); }
40% { transform: rotate(-10deg); }
60% { transform: rotate(5deg); }
80% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
20% {
transform: rotate(15deg);
}
40% {
transform: rotate(-10deg);
}
60% {
transform: rotate(5deg);
}
80% { t
ransform: rotate(-5deg);
}
100% {
transform: rotate(0deg);
}
}
.swing {

24
source/attention_seekers/tada.css
View File

@ -1,9 +1,23 @@
@keyframes tada {
0% {transform: scale(1);}
10%, 20% {transform: scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
100% {transform: scale(1) rotate(0);}
0% {
transform: scale(1);
}
10%, 20% {
transform: scale(0.9) rotate(-3deg);
}
30%, 50%, 70%, 90% {
transform: scale(1.1) rotate(3deg);
}
40%, 60%, 80% {
transform: scale(1.1) rotate(-3deg);
}
100% {
transform: scale(1) rotate(0);
}
}
.tada {

34
source/attention_seekers/wobble.css
View File

@ -1,13 +1,33 @@
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@keyframes wobble {
0% { transform: translateX(0%); }
15% { transform: translateX(-25%) rotate(-5deg); }
30% { transform: translateX(20%) rotate(3deg); }
45% { transform: translateX(-15%) rotate(-3deg); }
60% { transform: translateX(10%) rotate(2deg); }
75% { transform: translateX(-5%) rotate(-1deg); }
100% { transform: translateX(0%); }
0% {
transform: translateX(0%);
}
15% {
transform: translateX(-25%) rotate(-5deg);
}
30% {
transform: translateX(20%) rotate(3deg);
}
45% {
transform: translateX(-15%) rotate(-3deg);
}
60% {
transform: translateX(10%) rotate(2deg);
}
75% {
transform: translateX(-5%) rotate(-1deg);
}
100% {
transform: translateX(0%);
}
}
.wobble {

4
source/flippers/flip.css
View File

@ -3,18 +3,22 @@
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
animation-timing-function: ease-out;
}
40% {
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
animation-timing-function: ease-out;
}
50% {
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
animation-timing-function: ease-in;
}
80% {
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
animation-timing-function: ease-in;
}
100% {
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
animation-timing-function: ease-in;

1
source/flippers/flipOutX.css
View File

@ -3,6 +3,7 @@
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
transform: perspective(400px) rotateX(90deg);
opacity: 0;

1
source/flippers/flipOutY.css
View File

@ -3,6 +3,7 @@
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
100% {
transform: perspective(400px) rotateY(90deg);
opacity: 0;

19
source/lightspeed/lightSpeedIn.css
View File

@ -1,8 +1,19 @@
@keyframes lightSpeedIn {
0% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
60% { transform: translateX(-20%) skewX(30deg); opacity: 1; }
80% { transform: translateX(0%) skewX(-15deg); opacity: 1; }
100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
0% {
transform: translateX(100%) skewX(-30deg); opacity: 0;
}
60% {
transform: translateX(-20%) skewX(30deg); opacity: 1;
}
80% {
transform: translateX(0%) skewX(-15deg); opacity: 1;
}
100% {
transform: translateX(0%) skewX(0deg); opacity: 1;
}
}
.lightSpeedIn {

10
source/lightspeed/lightSpeedOut.css
View File

@ -1,10 +1,14 @@
@keyframes lightSpeedOut {
0% { transform: translateX(0%) skewX(0deg); opacity: 1; }
100% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
0% {
transform: translateX(0%) skewX(0deg); opacity: 1;
}
100% {
transform: translateX(100%) skewX(-30deg); opacity: 0;
}
}
.lightSpeedOut {
animation-name: lightSpeedOut;
animation-timing-function: ease-in;
}

34
source/specials/hinge.css
View File

@ -1,9 +1,33 @@
@keyframes hinge {
0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }
20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }
40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; }
80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; }
100% { transform: translateY(700px); opacity: 0; }
0% {
transform: rotate(0);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
20%, 60% {
transform: rotate(80deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
40% {
transform: rotate(60deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
80% {
transform: rotate(60deg) translateY(0);
transform-origin: top left;
animation-timing-function: ease-in-out;
opacity: 1;
}
100% {
transform: translateY(700px);
opacity: 0;
}
}
.hinge {

11
source/specials/rollIn.css
View File

@ -1,8 +1,15 @@
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@keyframes rollIn {
0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
100% { opacity: 1; transform: translateX(0px) rotate(0deg); }
0% {
opacity: 0;
transform: translateX(-100%) rotate(-120deg);
}
100% {
opacity: 1;
transform: translateX(0px) rotate(0deg);
}
}
.rollIn {