tweaked animation speeds

nuggetsnegin · Mar 22, 2020 · 7205f4c · 7205f4c
1 parent a0b88bb
commit 7205f4c
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 23 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
   "dependencies": {
     "axios": "^0.19.0",
     "firebase": "^7.5.0",
-    "gh-pages": "^2.1.1",
+    "gh-pages": "^2.2.0",
     "leo-profanity": "^1.2.6",
     "node-sass": "^4.13.0",
     "react": "^16.12.0",

diff --git a/src/components/DisplayWishes.js b/src/components/DisplayWishes.js
@@ -59,7 +59,7 @@ class DisplayWishes extends Component {
     const bubbleClasses = [
       'x1',
       'x2',
-      // 'x3',
+      'x3',
       'x4',
       'x5',
       'x6',

diff --git a/src/sass/_animation.scss b/src/sass/_animation.scss
@@ -27,11 +27,11 @@
 }
 
 .x2 {
-  -webkit-animation: animateBubble 20s linear infinite,
+  -webkit-animation: animateBubble 30s linear infinite,
     sideWays 4s ease-in-out infinite alternate;
-  -moz-animation: animateBubble 20s linear infinite,
+  -moz-animation: animateBubble 30s linear infinite,
     sideWays 4s ease-in-out infinite alternate;
-  animation: animateBubble 20s linear infinite,
+  animation: animateBubble 30s linear infinite,
     sideWays 4s ease-in-out infinite alternate;
 
   left: 15%;
@@ -131,23 +131,23 @@
     sideWays 3s ease-in-out infinite alternate;
 
   left: 70%;
-  top: 40%;
+  top: 70%;
 
   -webkit-transform: scale(1.1);
   -moz-transform: scale(1.1);
   transform: scale(1.1);
 }
 
 .x9 {
-  -webkit-animation: animateBubble 29s linear infinite,
+  -webkit-animation: animateBubble 49s linear infinite,
     sideWays 4s ease-in-out infinite alternate;
-  -moz-animation: animateBubble 29s linear infinite,
+  -moz-animation: animateBubble 49s linear infinite,
     sideWays 4s ease-in-out infinite alternate;
-  animation: animateBubble 29s linear infinite,
+  animation: animateBubble 49s linear infinite,
     sideWays 4s ease-in-out infinite alternate;
 
   left: 5%;
-  top: 50%;
+  top: 60%;
 
   -webkit-transform: scale(0.76);
   -moz-transform: scale(0.76);

diff --git a/src/styles/App.css b/src/styles/App.css
@@ -599,8 +599,8 @@ h1:after {
 }
 
 .x2 {
-  -webkit-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
-  animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
+  -webkit-animation: animateBubble 30s linear infinite, sideWays 4s ease-in-out infinite alternate;
+  animation: animateBubble 30s linear infinite, sideWays 4s ease-in-out infinite alternate;
   left: 15%;
   top: 80%;
   -webkit-transform: scale(0.8);
@@ -656,16 +656,16 @@ h1:after {
   -webkit-animation: animateBubble 32s linear infinite, sideWays 3s ease-in-out infinite alternate;
   animation: animateBubble 32s linear infinite, sideWays 3s ease-in-out infinite alternate;
   left: 70%;
-  top: 40%;
+  top: 70%;
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
 }
 
 .x9 {
-  -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
-  animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
+  -webkit-animation: animateBubble 49s linear infinite, sideWays 4s ease-in-out infinite alternate;
+  animation: animateBubble 49s linear infinite, sideWays 4s ease-in-out infinite alternate;
   left: 5%;
-  top: 50%;
+  top: 60%;
   -webkit-transform: scale(0.76);
   transform: scale(0.76);
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -59,7 +59,7 @@ class DisplayWishes extends Component { @@
         const bubbleClasses = [
           'x1',
           'x2',
-          // 'x3',
+          'x3',
           'x4',
           'x5',
           'x6',
@@ Expand Down @@