Merge pull request #29 from angelorohit/master
Added new animations lightSpeedIn, lightSpeedOut, wiggle
This commit is contained in:
Dan Eden
commit
5c1cfb260f
|
|
@ -3828,3 +3828,205 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
|
|||
-o-animation-name: rollOut;
|
||||
animation-name: rollOut;
|
||||
}
|
||||
|
||||
/* originally authored by Angelo Rohit - https://github.com/angelorohit */
|
||||
|
||||
@-webkit-keyframes lightSpeedIn {
|
||||
0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; }
|
||||
80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; }
|
||||
100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
}
|
||||
|
||||
@-moz-keyframes lightSpeedIn {
|
||||
0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1; }
|
||||
80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; }
|
||||
100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
}
|
||||
|
||||
@-ms-keyframes lightSpeedIn {
|
||||
0% { -ms-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
60% { -ms-transform: translateX(-20%) skewX(30deg); opacity: 1; }
|
||||
80% { -ms-transform: translateX(0%) skewX(-15deg); opacity: 1; }
|
||||
100% { -ms-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
}
|
||||
|
||||
@-o-keyframes lightSpeedIn {
|
||||
0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1; }
|
||||
80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; }
|
||||
100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
}
|
||||
|
||||
@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; }
|
||||
}
|
||||
|
||||
.lightSpeedIn {
|
||||
-webkit-animation-name: lightSpeedIn;
|
||||
-moz-animation-name: lightSpeedIn;
|
||||
-ms-animation-name: lightSpeedIn;
|
||||
-o-animation-name: lightSpeedIn;
|
||||
animation-name: lightSpeedIn;
|
||||
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
-moz-animation-timing-function: ease-out;
|
||||
-ms-animation-timing-function: ease-out;
|
||||
-o-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
.animated.lightSpeedIn {
|
||||
-webkit-animation-duration: 0.5s;
|
||||
-moz-animation-duration: 0.5s;
|
||||
-ms-animation-duration: 0.5s;
|
||||
-o-animation-duration: 0.5s;
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
/* originally authored by Angelo Rohit - https://github.com/angelorohit */
|
||||
|
||||
@-webkit-keyframes lightSpeedOut {
|
||||
0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
}
|
||||
|
||||
@-moz-keyframes lightSpeedOut {
|
||||
0% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
100% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
}
|
||||
|
||||
@-ms-keyframes lightSpeedOut {
|
||||
0% { -ms-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
100% { -ms-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
}
|
||||
|
||||
@-o-keyframes lightSpeedOut {
|
||||
0% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
100% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes lightSpeedOut {
|
||||
0% { transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
100% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
}
|
||||
|
||||
.lightSpeedOut {
|
||||
-webkit-animation-name: lightSpeedOut;
|
||||
-moz-animation-name: lightSpeedOut;
|
||||
-ms-animation-name: lightSpeedOut;
|
||||
-o-animation-name: lightSpeedOut;
|
||||
animation-name: lightSpeedOut;
|
||||
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
-moz-animation-timing-function: ease-in;
|
||||
-ms-animation-timing-function: ease-in;
|
||||
-o-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
|
||||
.animated.lightSpeedOut {
|
||||
-webkit-animation-duration: 0.25s;
|
||||
-moz-animation-duration: 0.25s;
|
||||
-ms-animation-duration: 0.25s;
|
||||
-o-animation-duration: 0.25s;
|
||||
animation-duration: 0.25s;
|
||||
}
|
||||
|
||||
/* originally authored by Angelo Rohit - https://github.com/angelorohit */
|
||||
|
||||
@-webkit-keyframes wiggle {
|
||||
0% { -webkit-transform: skewX(9deg); }
|
||||
10% { -webkit-transform: skewX(-8deg); }
|
||||
20% { -webkit-transform: skewX(7deg); }
|
||||
30% { -webkit-transform: skewX(-6deg); }
|
||||
40% { -webkit-transform: skewX(5deg); }
|
||||
50% { -webkit-transform: skewX(-4deg); }
|
||||
60% { -webkit-transform: skewX(3deg); }
|
||||
70% { -webkit-transform: skewX(-2deg); }
|
||||
80% { -webkit-transform: skewX(1deg); }
|
||||
90% { -webkit-transform: skewX(0deg); }
|
||||
100% { -webkit-transform: skewX(0deg); }
|
||||
}
|
||||
|
||||
@-moz-keyframes wiggle {
|
||||
0% { -moz-transform: skewX(9deg); }
|
||||
10% { -moz-transform: skewX(-8deg); }
|
||||
20% { -moz-transform: skewX(7deg); }
|
||||
30% { -moz-transform: skewX(-6deg); }
|
||||
40% { -moz-transform: skewX(5deg); }
|
||||
50% { -moz-transform: skewX(-4deg); }
|
||||
60% { -moz-transform: skewX(3deg); }
|
||||
70% { -moz-transform: skewX(-2deg); }
|
||||
80% { -moz-transform: skewX(1deg); }
|
||||
90% { -moz-transform: skewX(0deg); }
|
||||
100% { -moz-transform: skewX(0deg); }
|
||||
}
|
||||
|
||||
@-ms-keyframes wiggle {
|
||||
0% { -ms-transform: skewX(9deg); }
|
||||
10% { -ms-transform: skewX(-8deg); }
|
||||
20% { -ms-transform: skewX(7deg); }
|
||||
30% { -ms-transform: skewX(-6deg); }
|
||||
40% { -ms-transform: skewX(5deg); }
|
||||
50% { -ms-transform: skewX(-4deg); }
|
||||
60% { -ms-transform: skewX(3deg); }
|
||||
70% { -ms-transform: skewX(-2deg); }
|
||||
80% { -ms-transform: skewX(1deg); }
|
||||
90% { -ms-transform: skewX(0deg); }
|
||||
100% { -ms-transform: skewX(0deg); }
|
||||
}
|
||||
|
||||
@-o-keyframes wiggle {
|
||||
0% { -o-transform: skewX(9deg); }
|
||||
10% { -o-transform: skewX(-8deg); }
|
||||
20% { -o-transform: skewX(7deg); }
|
||||
30% { -o-transform: skewX(-6deg); }
|
||||
40% { -o-transform: skewX(5deg); }
|
||||
50% { -o-transform: skewX(-4deg); }
|
||||
60% { -o-transform: skewX(3deg); }
|
||||
70% { -o-transform: skewX(-2deg); }
|
||||
80% { -o-transform: skewX(1deg); }
|
||||
90% { -o-transform: skewX(0deg); }
|
||||
100% { -o-transform: skewX(0deg); }
|
||||
}
|
||||
|
||||
@keyframes wiggle {
|
||||
0% { transform: skewX(9deg); }
|
||||
10% { transform: skewX(-8deg); }
|
||||
20% { transform: skewX(7deg); }
|
||||
30% { transform: skewX(-6deg); }
|
||||
40% { transform: skewX(5deg); }
|
||||
50% { transform: skewX(-4deg); }
|
||||
60% { transform: skewX(3deg); }
|
||||
70% { transform: skewX(-2deg); }
|
||||
80% { transform: skewX(1deg); }
|
||||
90% { transform: skewX(0deg); }
|
||||
100% { transform: skewX(0deg); }
|
||||
}
|
||||
|
||||
.wiggle {
|
||||
-webkit-animation-name: wiggle;
|
||||
-moz-animation-name: wiggle;
|
||||
-ms-animation-name: wiggle;
|
||||
-o-animation-name: wiggle;
|
||||
animation-name: wiggle;
|
||||
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
-moz-animation-timing-function: ease-in;
|
||||
-ms-animation-timing-function: ease-in;
|
||||
-o-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
|
||||
.animated.wiggle {
|
||||
-webkit-animation-duration: 0.75s;
|
||||
-moz-animation-duration: 0.75s;
|
||||
-ms-animation-duration: 0.75s;
|
||||
-o-animation-duration: 0.75s;
|
||||
animation-duration: 0.75s;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
@-webkit-keyframes lightSpeedIn {
|
||||
0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; }
|
||||
80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; }
|
||||
100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
}
|
||||
|
||||
@-moz-keyframes lightSpeedIn {
|
||||
0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1; }
|
||||
80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; }
|
||||
100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
}
|
||||
|
||||
@-ms-keyframes lightSpeedIn {
|
||||
0% { -ms-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
60% { -ms-transform: translateX(-20%) skewX(30deg); opacity: 1; }
|
||||
80% { -ms-transform: translateX(0%) skewX(-15deg); opacity: 1; }
|
||||
100% { -ms-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
}
|
||||
|
||||
@-o-keyframes lightSpeedIn {
|
||||
0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1; }
|
||||
80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; }
|
||||
100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
}
|
||||
|
||||
@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; }
|
||||
}
|
||||
|
||||
.lightSpeedIn {
|
||||
-webkit-animation-name: lightSpeedIn;
|
||||
-moz-animation-name: lightSpeedIn;
|
||||
-ms-animation-name: lightSpeedIn;
|
||||
-o-animation-name: lightSpeedIn;
|
||||
animation-name: lightSpeedIn;
|
||||
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
-moz-animation-timing-function: ease-out;
|
||||
-ms-animation-timing-function: ease-out;
|
||||
-o-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
@-webkit-keyframes lightSpeedOut {
|
||||
0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
}
|
||||
|
||||
@-moz-keyframes lightSpeedOut {
|
||||
0% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
100% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
}
|
||||
|
||||
@-ms-keyframes lightSpeedOut {
|
||||
0% { -ms-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
100% { -ms-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
}
|
||||
|
||||
@-o-keyframes lightSpeedOut {
|
||||
0% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
100% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes lightSpeedOut {
|
||||
0% { transform: translateX(0%) skewX(0deg); opacity: 1; }
|
||||
100% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
|
||||
}
|
||||
|
||||
.lightSpeedOut {
|
||||
-webkit-animation-name: lightSpeedOut;
|
||||
-moz-animation-name: lightSpeedOut;
|
||||
-ms-animation-name: lightSpeedOut;
|
||||
-o-animation-name: lightSpeedOut;
|
||||
animation-name: lightSpeedOut;
|
||||
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
-moz-animation-timing-function: ease-in;
|
||||
-ms-animation-timing-function: ease-in;
|
||||
-o-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
@-webkit-keyframes wiggle {
|
||||
0% { -webkit-transform: skewX(9deg); }
|
||||
10% { -webkit-transform: skewX(-8deg); }
|
||||
20% { -webkit-transform: skewX(7deg); }
|
||||
30% { -webkit-transform: skewX(-6deg); }
|
||||
40% { -webkit-transform: skewX(5deg); }
|
||||
50% { -webkit-transform: skewX(-4deg); }
|
||||
60% { -webkit-transform: skewX(3deg); }
|
||||
70% { -webkit-transform: skewX(-2deg); }
|
||||
80% { -webkit-transform: skewX(1deg); }
|
||||
90% { -webkit-transform: skewX(0deg); }
|
||||
100% { -webkit-transform: skewX(0deg); }
|
||||
}
|
||||
|
||||
@-moz-keyframes wiggle {
|
||||
0% { -moz-transform: skewX(9deg); }
|
||||
10% { -moz-transform: skewX(-8deg); }
|
||||
20% { -moz-transform: skewX(7deg); }
|
||||
30% { -moz-transform: skewX(-6deg); }
|
||||
40% { -moz-transform: skewX(5deg); }
|
||||
50% { -moz-transform: skewX(-4deg); }
|
||||
60% { -moz-transform: skewX(3deg); }
|
||||
70% { -moz-transform: skewX(-2deg); }
|
||||
80% { -moz-transform: skewX(1deg); }
|
||||
90% { -moz-transform: skewX(0deg); }
|
||||
100% { -moz-transform: skewX(0deg); }
|
||||
}
|
||||
|
||||
@-ms-keyframes wiggle {
|
||||
0% { -ms-transform: skewX(9deg); }
|
||||
10% { -ms-transform: skewX(-8deg); }
|
||||
20% { -ms-transform: skewX(7deg); }
|
||||
30% { -ms-transform: skewX(-6deg); }
|
||||
40% { -ms-transform: skewX(5deg); }
|
||||
50% { -ms-transform: skewX(-4deg); }
|
||||
60% { -ms-transform: skewX(3deg); }
|
||||
70% { -ms-transform: skewX(-2deg); }
|
||||
80% { -ms-transform: skewX(1deg); }
|
||||
90% { -ms-transform: skewX(0deg); }
|
||||
100% { -ms-transform: skewX(0deg); }
|
||||
}
|
||||
|
||||
@-o-keyframes wiggle {
|
||||
0% { -o-transform: skewX(9deg); }
|
||||
10% { -o-transform: skewX(-8deg); }
|
||||
20% { -o-transform: skewX(7deg); }
|
||||
30% { -o-transform: skewX(-6deg); }
|
||||
40% { -o-transform: skewX(5deg); }
|
||||
50% { -o-transform: skewX(-4deg); }
|
||||
60% { -o-transform: skewX(3deg); }
|
||||
70% { -o-transform: skewX(-2deg); }
|
||||
80% { -o-transform: skewX(1deg); }
|
||||
90% { -o-transform: skewX(0deg); }
|
||||
100% { -o-transform: skewX(0deg); }
|
||||
}
|
||||
|
||||
@keyframes wiggle {
|
||||
0% { transform: skewX(9deg); }
|
||||
10% { transform: skewX(-8deg); }
|
||||
20% { transform: skewX(7deg); }
|
||||
30% { transform: skewX(-6deg); }
|
||||
40% { transform: skewX(5deg); }
|
||||
50% { transform: skewX(-4deg); }
|
||||
60% { transform: skewX(3deg); }
|
||||
70% { transform: skewX(-2deg); }
|
||||
80% { transform: skewX(1deg); }
|
||||
90% { transform: skewX(0deg); }
|
||||
100% { transform: skewX(0deg); }
|
||||
}
|
||||
|
||||
.wiggle {
|
||||
-webkit-animation-name: wiggle;
|
||||
-moz-animation-name: wiggle;
|
||||
-ms-animation-name: wiggle;
|
||||
-o-animation-name: wiggle;
|
||||
animation-name: wiggle;
|
||||
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
-moz-animation-timing-function: ease-in;
|
||||
-ms-animation-timing-function: ease-in;
|
||||
-o-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
Loading…
Reference in New Issue