add animation to the header

bronnie313 · Nov 18, 2023 · 1556d5d · 1556d5d
1 parent 739c613
commit 1556d5d
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 15 deletions.
diff --git a/src/App.css b/src/App.css
@@ -51,19 +51,8 @@ ul {
   position: absolute;
   width: 30%;
   z-index: -9999;
-  opacity: 0.1;
-  animation: fadeInOut 10s ease-in-out infinite, drift 8s linear infinite;
-}
-
-@keyframes fadeInOut {
-  0%,
-  100% {
-    opacity: 0.1;
-  }
-
-  50% {
-    opacity: 2;
-  }
+  opacity: 1;
+  animation: drift 8s linear infinite;
 }
 
 @keyframes drift {

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -23,7 +23,7 @@ const Header = () => {
         <div className="d-flex justify-content-center flex-column align-items-center">
           <h1 className="logo">
             R
-            <Icon icon="ant-design:code-filled" color="#0db760" fontSize="3rem" />
+            <Icon icon="carbon:transform-binary" color="#0db760" fontSize="3rem" />
             N
           </h1>
         </div>
@@ -71,7 +71,7 @@ const Header = () => {
       <div className="d-flex justify-content-center flex-column align-items-center">
         <h1 className="logo">
           R
-          <Icon icon="ant-design:code-filled" color="#0db760" fontSize="4rem" />
+          <Icon icon="carbon:transform-binary" color="#0db760" fontSize="3.5rem" className="rotate-icon" />
           N
         </h1>
         <p className="solutions"><em>Software Solutions</em></p>

diff --git a/src/css/header.css b/src/css/header.css
@@ -161,3 +161,17 @@
   opacity: 1;
   cursor: pointer;
 }
+
+.rotate-icon {
+  animation: rotateAnimation 4s linear infinite;
+}
+
+@keyframes rotateAnimation {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}