Merge pull request #29 from KoptevAnton/animation

Add header mobile-menu transition, add order-btn animation.
KoptevAnton · Aug 5, 2024 · 7260895 · 7260895
2 parents 64b74e9 + 08c4868
commit 7260895
Showing 1 changed file with 45 additions and 14 deletions.
diff --git a/src/css/header.css b/src/css/header.css
@@ -24,6 +24,7 @@
 
 .logo-img {
   border-radius: 18px;
+  width: 60px;
 }
 
 .logo-wrapper {
@@ -223,16 +224,17 @@
   right: 0;
   width: 100%;
   height: 100%;
-  transform: translate(100%, -100%);
+  transform: translate(100%, -100%) scale(0);
   z-index: 999;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
-  transition: all 350ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .is-open-modal {
-  transform: translate(0%, 0%);
+  transform: translate(0%, 0%) scale(1);
+
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
@@ -347,13 +349,6 @@
   color: var(--hover-color);
 }
 
-.order:focus {
-  background-color: var(--hover-color);
-  outline: 1px solid #fafafa;
-  box-shadow: -1px -1px 4px var(--hover-color), 1px 1px 6px var(--hover-color);
-  transform: translateY(-2px);
-}
-
 .order {
   display: block;
   font-size: 14px;
@@ -367,6 +362,16 @@
   border: none;
   background-color: var(--main-color);
   transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  animation: order-btn 4s ease-out infinite both;
+}
+
+.order:focus {
+  background-color: var(--hover-color);
+  outline: 1px solid #fafafa;
+  box-shadow: 0 0 2px var(--hover-color), 0 0 4px var(--hover-color),
+    0 0 6px var(--hover-color), 0 0 8px var(--hover-color),
+    0 0 10px var(--hover-color);
+  transform: translateY(-2px);
 }
 
 @media screen and (max-width: 768px) {
@@ -401,7 +406,7 @@
   }
 
   .header {
-    height: 103px;
+    height: 89px;
   }
 
   .modal {
@@ -480,19 +485,45 @@
   .order-btn {
     display: block;
     border-radius: 60px;
-    padding: 18px 24px;
+    padding: 11px 20px;
     border: none;
     line-height: 1.2;
     background-color: var(--main-color);
     transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+    animation: order-btn 4s ease-out infinite both;
   }
 
   .order-btn:hover,
   .order-btn:focus {
     background-color: var(--hover-color);
     outline: 1px solid #fafafa;
-    box-shadow: -1px -1px 4px var(--hover-color), 1px 1px 6px var(--hover-color);
-    transform: translateY(3px);
+    box-shadow: 0 0 2px var(--hover-color), 0 0 4px var(--hover-color),
+      0 0 6px var(--hover-color), 0 0 8px var(--hover-color),
+      0 0 10px var(--hover-color);
+  }
+}
+
+@keyframes order-btn {
+  0% {
+    transform: scale(1);
+  }
+  10% {
+    transform: scale(1.05);
+  }
+  20% {
+    transform: scale(1);
+  }
+  30% {
+    transform: scale(1.05);
+  }
+  40% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
   }
 }