Added new animations
This commit is contained in:
Dan Eden
parent
917d278cae
commit
a73a879d51
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,42 @@
|
|||
@-webkit-keyframes hinge {
|
||||
0%, 20%, 40%, 60%, 80% { -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
|
||||
0% { -webkit-transform: rotate(0); }
|
||||
20%, 60% { -webkit-transform: rotate(80deg); }
|
||||
40% { -webkit-transform: rotate(60deg); }
|
||||
80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; }
|
||||
100% { -webkit-transform: translateY(700px); opacity: 0; }
|
||||
}
|
||||
|
||||
@-moz-keyframes hinge {
|
||||
0%, 20%, 40%, 60%, 80% { -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
|
||||
0% { -moz-transform: rotate(0); }
|
||||
20%, 60% { -moz-transform: rotate(80deg); }
|
||||
40% { -moz-transform: rotate(60deg); }
|
||||
80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; }
|
||||
100% { -moz-transform: translateY(700px); opacity: 0; }
|
||||
}
|
||||
|
||||
@-ms-keyframes hinge {
|
||||
0%, 20%, 40%, 60%, 80% { -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out; }
|
||||
0% { -ms-transform: rotate(0); }
|
||||
20%, 60% { -ms-transform: rotate(80deg); }
|
||||
40% { -ms-transform: rotate(60deg); }
|
||||
80% { -ms-transform: rotate(60deg) translateY(0); opacity: 1; }
|
||||
100% { -ms-transform: translateY(700px); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes hinge {
|
||||
0%, 20%, 40%, 60%, 80% { transform-origin: top left; animation-timing-function: ease-in-out; }
|
||||
0% { transform: rotate(0); }
|
||||
20%, 60% { transform: rotate(80deg); }
|
||||
40% { transform: rotate(60deg); }
|
||||
80% { transform: rotate(60deg) translateY(0); opacity: 1; }
|
||||
100% { transform: translateY(700px); opacity: 0; }
|
||||
}
|
||||
|
||||
.hinge {
|
||||
-webkit-animation-name: hinge;
|
||||
-moz-animation-name: hinge;
|
||||
-ms-animation-name: hinge;
|
||||
animation-name: hinge;
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
|
||||
|
||||
@-webkit-keyframes pulse {
|
||||
0% { -webkit-transform: scale(1); }
|
||||
50% { -webkit-transform: scale(1.1); }
|
||||
100% { -webkit-transform: scale(1); }
|
||||
}
|
||||
@-moz-keyframes pulse {
|
||||
0% { -moz-transform: scale(1); }
|
||||
50% { -moz-transform: scale(1.1); }
|
||||
100% { -moz-transform: scale(1); }
|
||||
}
|
||||
@-ms-keyframes pulse {
|
||||
0% { -ms-transform: scale(1); }
|
||||
50% { -ms-transform: scale(1.1); }
|
||||
100% { -ms-transform: scale(1); }
|
||||
}
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.pulse {
|
||||
-webkit-animation-name: pulse;
|
||||
-moz-animation-name: pulse;
|
||||
-ms-animation-name: pulse;
|
||||
animation-name: pulse;
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
|
||||
|
||||
@-webkit-keyframes rollIn {
|
||||
0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); }
|
||||
100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); }
|
||||
}
|
||||
|
||||
@-moz-keyframes rollIn {
|
||||
0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); }
|
||||
100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); }
|
||||
}
|
||||
|
||||
@-ms-keyframes rollIn {
|
||||
0% { opacity: 0; -ms-transform: translateX(-100%) rotate(-120deg); }
|
||||
100% { opacity: 1; -ms-transform: translateX(0px) rotate(0deg); }
|
||||
}
|
||||
|
||||
@keyframes rollIn {
|
||||
0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
|
||||
100% { opacity: 1; transform: translateX(0px) rotate(0deg); }
|
||||
}
|
||||
|
||||
.rollIn {
|
||||
-webkit-animation-name: rollIn;
|
||||
-moz-animation-name: rollIn;
|
||||
-ms-animation-name: rollIn;
|
||||
animation-name: rollIn;
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
|
||||
|
||||
@-webkit-keyframes rollOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateX(0px) rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateX(100%) rotate(120deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes rollOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-moz-transform: translateX(0px) rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateX(100%) rotate(120deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-ms-keyframes rollOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-ms-transform: translateX(0px) rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-ms-transform: translateX(100%) rotate(120deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rollOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateX(0px) rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(100%) rotate(120deg);
|
||||
}
|
||||
}
|
||||
|
||||
.rollOut {
|
||||
-webkit-animation-name: rollOut;
|
||||
-moz-animation-name: rollOut;
|
||||
-ms-animation-name: rollOut;
|
||||
animation-name: rollOut;
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
@-webkit-keyframes swing {
|
||||
20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
|
||||
20% { -webkit-transform: rotate(15deg); }
|
||||
40% { -webkit-transform: rotate(-10deg); }
|
||||
60% { -webkit-transform: rotate(5deg); }
|
||||
80% { -webkit-transform: rotate(-5deg); }
|
||||
100% { -webkit-transform: rotate(0deg); }
|
||||
}
|
||||
|
||||
@-moz-keyframes swing {
|
||||
20%, 40%, 60%, 80%, 100% { -moz-transform-origin: top center; }
|
||||
20% { -moz-transform: rotate(15deg); }
|
||||
40% { -moz-transform: rotate(-10deg); }
|
||||
60% { -moz-transform: rotate(5deg); }
|
||||
80% { -moz-transform: rotate(-5deg); }
|
||||
100% { -moz-transform: rotate(0deg); }
|
||||
}
|
||||
|
||||
@-ms-keyframes swing {
|
||||
20%, 40%, 60%, 80%, 100% { -ms-transform-origin: top center; }
|
||||
20% { -ms-transform: rotate(15deg); }
|
||||
40% { -ms-transform: rotate(-10deg); }
|
||||
60% { -ms-transform: rotate(5deg); }
|
||||
80% { -ms-transform: rotate(-5deg); }
|
||||
100% { -webkit-transform: rotate(0deg); }
|
||||
}
|
||||
|
||||
@keyframes swing {
|
||||
20%, 40%, 60%, 80%, 100% { transform-origin: top center; }
|
||||
20% { transform: rotate(15deg); }
|
||||
40% { transform: rotate(-10deg); }
|
||||
60% { transform: rotate(5deg); }
|
||||
80% { transform: rotate(-5deg); }
|
||||
100% { transform: rotate(0deg); }
|
||||
}
|
||||
|
||||
.swing {
|
||||
-webkit-animation-name: swing;
|
||||
-moz-animation-name: swing;
|
||||
-ms-animation-name: swing;
|
||||
animation-name: swing;
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
|
||||
|
||||
@-webkit-keyframes wobble {
|
||||
0% { -webkit-transform: translateX(0%); }
|
||||
15% { -webkit-transform: translateX(-25%) rotate(-5deg); }
|
||||
30% { -webkit-transform: translateX(20%) rotate(3deg); }
|
||||
45% { -webkit-transform: translateX(-15%) rotate(-3deg); }
|
||||
60% { -webkit-transform: translateX(10%) rotate(2deg); }
|
||||
75% { -webkit-transform: translateX(-5%) rotate(-1deg); }
|
||||
100% { -webkit-transform: translateX(0%); }
|
||||
}
|
||||
|
||||
@-moz-keyframes wobble {
|
||||
0% { -moz-transform: translateX(0%); }
|
||||
15% { -moz-transform: translateX(-25%) rotate(-5deg); }
|
||||
30% { -moz-transform: translateX(20%) rotate(3deg); }
|
||||
45% { -moz-transform: translateX(-15%) rotate(-3deg); }
|
||||
60% { -moz-transform: translateX(10%) rotate(2deg); }
|
||||
75% { -moz-transform: translateX(-5%) rotate(-1deg); }
|
||||
100% { -moz-transform: translateX(0%); }
|
||||
}
|
||||
|
||||
@-ms-keyframes wobble {
|
||||
0% { -ms-transform: translateX(0%); }
|
||||
15% { -ms-transform: translateX(-25%) rotate(-5deg); }
|
||||
30% { -ms-transform: translateX(20%) rotate(3deg); }
|
||||
45% { -ms-transform: translateX(-15%) rotate(-3deg); }
|
||||
60% { -ms-transform: translateX(10%) rotate(2deg); }
|
||||
75% { -ms-transform: translateX(-5%) rotate(-1deg); }
|
||||
100% { -ms-transform: translateX(0%); }
|
||||
}
|
||||
|
||||
@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%); }
|
||||
}
|
||||
|
||||
.wobble {
|
||||
-webkit-animation-name: wobble;
|
||||
-moz-animation-name: wobble;
|
||||
-ms-animation-name: wobble;
|
||||
animation-name: wobble;
|
||||
}
|
||||
Loading…
Reference in New Issue