feat(ui): update background color effect

* Add new colors * Change effect time
mateusfg7 · Apr 8, 2022 · 7fd23e1 · 7fd23e1
1 parent 478d62a
commit 7fd23e1
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 38 deletions.
diff --git a/src/styles/effects.ts b/src/styles/effects.ts
@@ -3,71 +3,69 @@ import { keyframes } from 'styled-components'
 const backgroundChange = keyframes`
 
   0% {
+    background-color: #0485B4;
+  }
+  5.2631% {
+    background-color: #0D7AB5;
+  }
+  10.5262% {
     background-color: #16528E;
   }
-  5% {
+  15.7893% {
     background-color: #004761;
   }
-  10% {
+  21.0524% {
     background-color: #0A615C;
   }
-  15% {
+  26.3155% {
     background-color: #147B57;
   }
-  20% {
+  31.5786% {
     background-color: #226D6C;
   }
-  25% {
+  36.8417% {
     background-color: #2F5E81;
   }
-  30% {
+  42.1048% {
     background-color: #4940AA;
   }
-  35% {
-    background-color: #16528E;
-  }
-  40% {
-    background-color: #004761;
-  }
-  45% {
-    background-color: #0A615C;
+  47.3679% {
+    background-color: #5A3080;
   }
-  50% {
-    background-color: #147B57;
+  52.6310% {
+    background-color: #5A3080;
   }
-  55% {
-    background-color: #226D6C;
+  57.8941% {
+    background-color: #4940AA;
   }
-  60% {
+  63.1572% {
     background-color: #2F5E81;
   }
-  65% {
-    background-color: #4940AA;
-  }
-  70% {
-    background-color: #16528E;
+  68.4204% {
+    background-color: #226D6C;
   }
-  75% {
-    background-color: #004761;
+  73.6835% {
+    background-color: #147B57;
   }
-  80% {
+  78.9466% {
     background-color: #0A615C;
   }
-  85% {
-    background-color: #147B57;
-  }
-  90% {
-    background-color: #226D6C;
+  84.2097% {
+    background-color: #004761;
   }
-  95% {
-    background-color: #2F5E81;
+  89.4728% {
+    background-color: #16528E;
   }
-  97% {
-    background-color: #4940AA;
+  94.7359% {
+    background-color: #0D7AB5;
   }
   100% {
-    background-color: #16528E;
+    background-color: #0485B4;
   }
+  
+  
+  
+  
 `
 
 export default backgroundChange
diff --git a/src/styles/global.ts b/src/styles/global.ts
@@ -43,7 +43,7 @@ export default createGlobalStyle`
 
     background: fixed no-repeat center;
     background-size: cover;
-    animation: ${backgroundChange} calc(10*60s) 0s infinite;
+    animation: ${backgroundChange} calc(5*60s) 0s infinite;
 
     input:focus {
     outline: none;