Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Merge pull request #29 from angelorohit/master

Added new animations lightSpeedIn, lightSpeedOut, wiggle
  • Loading branch information...
commit 5c1cfb260fc0ea43421efe6effdb5d75819d54cb 2 parents be2e0d6 + a7f45ca
@daneden authored
View
202 animate.css
@@ -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;
+}
View
48 source/lightSpeedIn.css
@@ -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;
+}
View
38 source/lightSpeedOut.css
@@ -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;
+}
View
83 source/wiggle.css
@@ -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;
+}
Please sign in to comment.
Something went wrong with that request. Please try again.