maj

user/themes/gilles_acezat/scss/configurations/_animation.scss

@@ -1,3 +1,12 @@
+@-webkit-keyframes rotation {
+  from {
+      -webkit-transform: rotate(0deg);
+  }
+  to {
+      -webkit-transform: rotate(359deg);
+  }
+}
+
 @keyframes rotation {
   from {
       -webkit-transform: rotate(0deg);
@@ -7,6 +16,25 @@
   }
 }
 
+@-webkit-keyframes translateright{
+  0%{
+    right: -50px;
+    color: transparent;
+    display: none;
+  }
+
+  30%{
+    right: 150px;
+    color: transparent;
+    display: block;
+  }
+
+  100%{
+    right: 200px;
+    color: white;
+  }
+}
+
 @keyframes translateright{
   0%{
     right: -50px;
@@ -26,6 +54,24 @@
   }
 }
 
+@-webkit-keyframes translateleft{
+  0%{
+    right: 200px;
+    color: white;
+    display: block;
+  }
+  30%{
+    right: 150px;
+    color: transparent;
+  }
+
+  100%{
+    right: -200px;
+    color: transparent;
+    display: none;
+  }
+}
+
 @keyframes translateleft{
   0%{
     right: 200px;
@@ -44,55 +90,119 @@
   }
 }
 
-@keyframes reducH{
+@-webkit-keyframes reducH{
   0%{
     font-size: $fh1;
-    -webkit-text-stroke : 1px;
+    -webkit-text-stroke : 2px black;
     color: transparent;
     line-height: 5rem;
   }
 
   70%{
-    -webkit-text-stroke : 1px;
+    -webkit-text-stroke : 1px black;
     color: black;
-    // line-height: 6.5rem;
-
   }
 
   100%{
     font-size: $min-h1;
-    -webkit-text-stroke : 0px;
+    -webkit-text-stroke : 0px black;
     color: black;
     line-height: 5rem;
   }
 }
 
-@keyframes translateY{
+@keyframes reducH{
   0%{
-    transform: translateY(0px);
+    font-size: $fh1;
+    -webkit-text-stroke : 2px black;
+    color: transparent;
+    line-height: 5rem;
+  }
+
+  70%{
+    -webkit-text-stroke : 1px black;
+    color: black;
+  }
+
+  100%{
+    font-size: $min-h1;
+    -webkit-text-stroke : 0px black;
+    color: black;
+    line-height: 5rem;
+  }
+}
+
+@-webkit-keyframes translateY{
+  0%{
+    -webkit-transform: translateY(0px);
+            transform: translateY(0px);
     opacity: 1;
   }
 
   100%{
-    transform: translateY(-20px);
+    -webkit-transform: translateY(-20px);
+            transform: translateY(-20px);
     opacity: 0;
   }
 }
 
+@keyframes translateY{
+  0%{
+    -webkit-transform: translateY(0px);
+            transform: translateY(0px);
+    opacity: 1;
+  }
+
+  100%{
+    -webkit-transform: translateY(-20px);
+            transform: translateY(-20px);
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes showcatlist {
+  0%{
+    width: 0;
+    -webkit-box-shadow: 0px 0px 0px 0px black;
+            box-shadow: 0px 0px 0px 0px black;
+    opacity: 1;
+  }
+
+  100%{
+    width: 100%;
+    -webkit-box-shadow: 0px -2px 0px -2px black;
+            box-shadow: 0px -2px 0px -2px black;
+    opacity: 1;
+  }
+}
+
 @keyframes showcatlist {
   0%{
     width: 0;
-    box-shadow: 0px 0px 0px 0px black;
+    -webkit-box-shadow: 0px 0px 0px 0px black;
+            box-shadow: 0px 0px 0px 0px black;
     opacity: 1;
   }
 
   100%{
     width: 100%;
-    box-shadow: 0px -2px 0px -2px black;
+    -webkit-box-shadow: 0px -2px 0px -2px black;
+            box-shadow: 0px -2px 0px -2px black;
     opacity: 1;
   }
 }
 
+@-webkit-keyframes showborder {
+  0%{
+    width: 0;
+    background: black;
+  }
+  100%{
+    width: 100%;
+    background: black;
+  }
+}
+
 @keyframes showborder {
   0%{
     width: 0;
@@ -104,14 +214,41 @@
   }
 }
 
-@keyframes ultranslate {
+@-webkit-keyframes ultranslate {
   0%{
     opacity: 0;
-    transform: translateX(0px);
+    -webkit-transform: translateX(0px);
+            transform: translateX(0px);
   }
   100%{
     opacity: 1;
-    transform: translateX(10px);
+    -webkit-transform: translateX(10px);
+            transform: translateX(10px);
+  }
+}
+
+@keyframes ultranslate {
+  0%{
+    opacity: 0;
+    -webkit-transform: translateX(0px);
+            transform: translateX(0px);
+  }
+  100%{
+    opacity: 1;
+    -webkit-transform: translateX(10px);
+            transform: translateX(10px);
+  }
+}
+
+
+@-webkit-keyframes showcard {
+  0%{
+    opacity: 0;
+
+  }
+  100%{
+    opacity: 1;
+
   }
 }