メニュー・サービスの hove にアニメーション

achievement-official.conohawing.com/assets/css/style.css

@@ -1597,8 +1597,8 @@ header
 
 .c-navService {
  display: none;
+ opacity: 0;
 }
-
 .c-nav-sab-active .c-navService {
  position: absolute;
  top: 40px;
@@ -1606,6 +1606,13 @@ header
  display: block;
  width: 100%;
  background: #212121;
+ opacity: 1;
+ animation-duration: 0.5s;
+ animation-name: fade-in;
+ -moz-animation-duration: 0.5s;
+ -moz-animation-name: fade-in;
+ -webkit-animation-duration: 0.5s;
+ -webkit-animation-name: fade-in;
 }
 .c-nav-sab-active .c-navService .c-nav-sab {
  display: flex;
@@ -1679,6 +1686,13 @@ header
  background-color: #212121;
  -webkit-transform: skew(-20deg);
  transform: skew(-20deg);
+  opacity: 1;
+ animation-duration: 0.5s;
+ animation-name: fade-in;
+ -moz-animation-duration: 0.5s;
+ -moz-animation-name: fade-in;
+ -webkit-animation-duration: 0.5s;
+ -webkit-animation-name: fade-in;
 }
 .fixed-nav .c-nav-sab-active .c-navService {
  display: none;
@@ -9568,3 +9582,53 @@ body {
 }
 
 
+@keyframes fade-in {
+  0% {
+    display: none;
+    opacity: 0;
+  }
+
+  1% {
+    display: block;
+    opacity: 0;
+  }
+
+  100% {
+    display: block;
+    opacity: 1;
+  }
+}
+
+@-moz-keyframes fade-in {
+  0% {
+    display: none;
+    opacity: 0;
+  }
+
+  1% {
+    display: block;
+    opacity: 0;
+  }
+
+  100% {
+    display: block;
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes fade-in {
+  0% {
+    display: none;
+    opacity: 0;
+  }
+
+  1% {
+    display: block;
+    opacity: 0;
+  }
+
+  100% {
+    display: block;
+    opacity: 1;
+  }
+}