transition working state

prafulla-codes · Nov 10, 2021 · 385e4a5 · 385e4a5
1 parent a88febd
commit 385e4a5
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 3 deletions.
diff --git a/confetti.html b/confetti.html
diff --git a/hat.js b/hat.js
@@ -77,7 +77,7 @@ class Hat {
     displayBadgePage(){
         let badgePage = document.getElementsByTagName('body')[0];
         badgePage.style.animation= "";
-        badgePage.style.backgroundColor='#1A472A';
+        badgePage.style.backgroundColor='';
         badgePage.style.animation = "2s appear forwards";
     }
     think(ANIM_TIME){

diff --git a/sorting.html b/sorting.html
diff --git a/style.css b/style.css
@@ -59,8 +59,26 @@ body {
 } 
 
 @keyframes appear {
-    from {background-size: 0%;}
-    to {background-size: 100%;}
+
+
+    from{
+        background-image: linear-gradient(135deg, #1A472A 50%, black 50%);
+        background-position: left -100vw;
+    }
+    to{
+        background-image: #1A472A;
+        background-position: right 0vw;
+        transition: background-image 2000ms linear;
+
+    } 
+    /* 50%{
+        left: 0vw;
+         background-image: #1A472A; 
+    }
+    100%{
+        left: 100vw;
+        background-color: #1A472A;
+    } */
 }
 @keyframes move-stars {
     0%{transform: translateX(0)}