Corrected axis identifiers

Renamed the flippers to their correct axis identifiers as given in the issue i submitted: animate-css#1572
artisticLogicMK · Aug 1, 2022 · 2863421 · 2863421
1 parent e71b121
commit 2863421
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 24 deletions.
diff --git a/source/flippers/flipInX.css b/source/flippers/flipInX.css
@@ -1,30 +1,30 @@
-@keyframes flipInX {
+@keyframes flipInY {
   from {
-    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
     animation-timing-function: ease-in;
     opacity: 0;
   }
 
   40% {
-    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
     animation-timing-function: ease-in;
   }
 
   60% {
-    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
     opacity: 1;
   }
 
   80% {
-    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
   }
 
   to {
     transform: perspective(400px);
   }
 }
 
-.flipInX {
+.flipInY {
   backface-visibility: visible !important;
-  animation-name: flipInX;
+  animation-name: flipInY;
 }
diff --git a/source/flippers/flipInY.css b/source/flippers/flipInY.css
@@ -1,30 +1,30 @@
-@keyframes flipInY {
+@keyframes flipInX {
   from {
-    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
     animation-timing-function: ease-in;
     opacity: 0;
   }
 
   40% {
-    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
     animation-timing-function: ease-in;
   }
 
   60% {
-    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
     opacity: 1;
   }
 
   80% {
-    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
   }
 
   to {
     transform: perspective(400px);
   }
 }
 
-.flipInY {
+.flipInX {
   backface-visibility: visible !important;
-  animation-name: flipInY;
+  animation-name: flipInX;
 }
diff --git a/source/flippers/flipOutX.css b/source/flippers/flipOutX.css
@@ -1,21 +1,21 @@
-@keyframes flipOutX {
+@keyframes flipOutY {
   from {
     transform: perspective(400px);
   }
 
   30% {
-    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
     opacity: 1;
   }
 
   to {
-    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
     opacity: 0;
   }
 }
 
-.flipOutX {
+.flipOutY {
   animation-duration: calc(var(--animate-duration) * 0.75);
-  animation-name: flipOutX;
   backface-visibility: visible !important;
+  animation-name: flipOutY;
 }
diff --git a/source/flippers/flipOutY.css b/source/flippers/flipOutY.css
@@ -1,21 +1,21 @@
-@keyframes flipOutY {
+@keyframes flipOutX {
   from {
     transform: perspective(400px);
   }
 
   30% {
-    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
     opacity: 1;
   }
 
   to {
-    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
     opacity: 0;
   }
 }
 
-.flipOutY {
+.flipOutX {
   animation-duration: calc(var(--animate-duration) * 0.75);
+  animation-name: flipOutX;
   backface-visibility: visible !important;
-  animation-name: flipOutY;
 }