fix: idle animation now looks like hovering

Author: troys-code

client/components/Robot.js

@@ -87,18 +87,18 @@ class Robot extends Component {
           }}
           children={value => <div>
             <div
-              className={classNames('robot-container', this.props.levelWon ? 'b3-container-animation' : '')}
+              className={classNames('robot-container', { 'b3-container-animation': this.props.levelWon })}
               style={{
                 height: value.scale,
                 width: value.scale,
                 top: value.y - 12,
                 left: value.x,
                 transform: `translate(-50%, -50%)`,
               }}>
-              <img src="/resources/images/shadow.svg" className={classNames('shadow', { 'shadow-animation': this.props.levelWon })} />
+              <img src="/resources/images/shadow.svg" className={classNames('b3-shadow', { 'b3-shadow-animation': this.props.levelWon })} />
             </div>
             <div
-              className={classNames('robot-container', this.props.levelWon ? 'b3-container-animation' : '')}
+              className={classNames('robot-container', 'up-down-animation', { 'b3-container-animation': this.props.levelWon })}
               style={{
                 height: value.scale,
                 width: value.scale,

client/scss/robot.scss

@@ -9,59 +9,57 @@
   overflow: visible;
 }
 
+.up-down-animation {
+  animation: upDown 400ms ease-in-out infinite alternate;
+
+  @keyframes upDown {
+    0% {
+      translate: 0 min(-0.22vw, -0.22vh);
+    }
+    100% {
+      translate: 0 max(0.22vw, 0.22vh);
+    }
+  }
+}
+
 .b3-container-animation {
   position: absolute;
   width: 100%;
   height: 100%;
-  z-index: 100;
-  overflow: visible;
   animation: fadeOut 1.8s ease-in normal forwards;
 
   @keyframes fadeOut {
     from {
       opacity: 1;
     }
-
     to {
       opacity: 0.4;
       top: -30%;
     }
   }
 }
 
-@keyframes leftright {
-  0% {
-    transform: translateX(-0.2vw);
-  }
-  100% {
-    transform: translateX(0.2vw);
-  }
-}
-
 .b3-robot {
   width: 100%;
   height: 100%;
   z-index: 100;
   overflow: visible;
 
-  animation: leftright 400ms ease-in-out infinite alternate;
 
   @media screen and (max-width: 850px) {
     width: 40%;
     height: 40%;
   }
 }
 
-.shadow {
+.b3-shadow {
   width: 90%;
   height: 90%;
   border-radius: 50%;
   z-index: 5;
   translate: 0% 25%;
   overflow: visible;
 
-  animation: leftright 400ms ease-in-out infinite alternate;
-
   &-animation {
     animation: fadeOutShadow 3s;