create animation when cards is given #4

michivonah · Jan 16, 2023 · 1dee79e · 1dee79e
1 parent 1075f38
commit 1dee79e
Showing 1 changed file with 40 additions and 0 deletions.
diff --git a/style.css b/style.css
@@ -103,18 +103,58 @@ body{
 
 .card:is(.playerBottom){
     transform: translate(-50%, -40%) rotate(0deg);
+    animation: slideInFromBottom 0.4s 1;
 }
 
 .card:is(.playerLeft){
     transform: translate(-60%, -50%) rotate(90deg);
+    animation: slideInFromLeft 0.4s 1;
 }
 
 .card:is(.playerTop){
     transform: translate(-50%, -60%) rotate(180deg);
+    animation: slideInFromTop 0.4s 1;
 }
 
 .card:is(.playerRight){
     transform: translate(-40%, -50%) rotate(270deg);
+    animation: slideInFromRight 0.4s 1;
+}
+
+@keyframes slideInFromBottom{
+    0%{
+        transform: translate(-50%, -30%) rotate(0deg);
+    }
+    100%{
+        transform: translate(-50%, -40%) rotate(0deg);
+    }
+}
+
+@keyframes slideInFromLeft{
+    0%{
+        transform: translate(-70%, -50%) rotate(90deg);
+    }
+    100%{
+        transform: translate(-60%, -50%) rotate(90deg);
+    }
+}
+
+@keyframes slideInFromTop{
+    0%{
+        transform: translate(-50%, -70%) rotate(180deg);
+    }
+    100%{
+        transform: translate(-50%, -60%) rotate(180deg);
+    }
+}
+
+@keyframes slideInFromRight{
+    0%{
+        transform: translate(-30%, -50%) rotate(270deg);
+    }
+    100%{
+        transform: translate(-40%, -50%) rotate(270deg);
+    }
 }
 
 /* PLAYER CARDS */