add simple logo animation

Author: nchan0154

src/components/public/nav/brand_camerakit_logo.svg

@@ -6,7 +6,7 @@ import Logo from './brand_camerakit_logo.svg';
 const Nav = () => (
   <nav className={styles.nav}>
     <div className={`container ${styles.container}`}>
-      <div className={styles.brand}>
+      <div className={`animated-logo__wrapper ${styles.brand}`}>
         <Logo />
       </div>
       <div className={styles.links}>

src/components/public/nav/index.js

@@ -4,7 +4,10 @@
 @import '/styles/variables';
 
 @import '/styles/container';
+
+//svgs 
 @import '/styles/feature-icon';
+@import '/styles/logo-animation';
 
 
 * {

src/styles.global.scss

@@ -0,0 +1,73 @@
+:global {
+
+  .animated-logo {
+    height: 3rem;
+
+    .camera-lens {
+      transform-origin: center;
+      animation: lens 1.5s linear forwards 1s;
+    }
+
+    .text {
+      transform-origin: right;
+      animation: text 0.8s linear forwards 3s;
+      opacity: 0;
+    }
+  }
+
+  .animated-logo__wrapper {
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0.5rem;
+      left: 1.25rem;
+      width: 2rem;
+      height: 2rem;
+      border-radius: 50%;
+      background-color: #fff;
+      opacity: 0;
+      animation: flare 0.8s ease-out 2.5s;
+    }
+  }
+
+  @keyframes lens {
+    10% {
+      transform: rotate(30deg);
+    }
+
+    30% {
+      transform: rotate(30deg);
+    }
+    
+    50% {
+      transform: rotate(210deg);
+    }
+
+    70% {
+      transform: rotate(210deg);
+    }
+  }
+
+  @keyframes text {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes flare {
+    0% {
+      opacity: 1;
+      transform: scale(0);
+    }
+
+    100% {
+      opacity: 0;
+      transform: scale(6);
+    }
+  }
+
+}