From 1dee79eecf17d1cefdd8dc5507276764f66fe6a6 Mon Sep 17 00:00:00 2001
From: michivonah <info@michivonah>
Date: Mon, 16 Jan 2023 17:22:05 +0100
Subject: [PATCH] create animation when cards is given #4

---
 style.css | 40 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/style.css b/style.css
index f1ed954..bc534d3 100644
--- 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 */