animate contact

user/themes/gilles_acezat/scss/theme/all.scss

@@ -7,7 +7,7 @@ header{
     z-index: 9999;
     position: fixed;
     top: 20px;
-    right: 40px;
+    right: 2%;
     transform: scale(1);
     transition: transform 0.5s ease;
     cursor: pointer;
@@ -15,16 +15,59 @@ header{
       transition: transform 0.5s ease;
       transform: scale(0.9);
     }
-    svg{
+    &.open{
+      transform: scale(15);
+      transition: transform 0.5s ease;
+      h3{
+        color: transparent;
+        transition: visibility 0.5 ease;
+      }
+      img{
+        animation: rotation 12s infinite linear;
+      }
+      & + .txt{
+          position: fixed;
+          top: 190px;
+          text-align: center;
+          line-height: 1.5rem;
+          z-index: 9999;
+          animation: translateright 1s ease forwards;
+      }
+    }
+    &.close{
+      transform: scale(1);
+      transition: transform 0.5s 0.1s ease;
+      & + .txt{
+          position: fixed;
+          top: 190px;
+          text-align: center;
+          line-height: 1.5rem;
+          z-index: 9999;
+          animation: translateleft 1s ease forwards;
+      }
+      h3{
+        color: white;
+        transition: color 0.5s 0.4s ease;
+      }
+      &:hover{
+        transition: transform 0.5s ease!important;
+        transform: scale(0.9)!important;
+      }
+    }
+    img{
       animation: rotation 6s infinite linear;
-      width: 90.4px;
-      height: 87.45px;
     }
     h3{
       transform: rotate(35deg);
+      position: absolute;
+      top: 33px;
+      left: 20px;
     }
-    p{
-      display: none;
+    & + .txt{
+        position: fixed;
+        right: -200px;
+        p{
+      }
     }
   }
   h2{