Merge pull request #6 from ac-mmi/main

Glitch, FlipBounce, and FadeSmoke animate-css#1805

Author: Yohn

source/fading_exits/fadeSmoke.css

@@ -0,0 +1,28 @@
+  .animate__fadeSmoke
+  {
+    -webkit-animation-name: fadeSmoke;
+  animation-name: fadeSmoke;
+    -webkit-animation-duration: 1s;
+    animation-duration: 1s;
+  }
+
+       @keyframes fadeSmoke
+       {
+        0%
+        {
+filter: blur(0px);
+transform: scaleY(1)translateY(0px);
+opacity: 1;
+        }
+        90%
+        {
+filter: blur(10px);
+transform: scaleY(1.2)translateY(-20px);
+
+
+        }
+        100%
+        {
+          opacity: 0;
+        }
+       }

source/flippers/flipBounce.css

@@ -0,0 +1,38 @@
+       .animate__flipBounce
+        {
+          display: flex;
+          align-items: center;
+          transform-style: preserve-3d;
+          perspective-origin: 30% 50%;
+          perspective: 1000px !important;
+          position: relative;
+        }
+
+        .animate__flipBounce::after
+        {
+          content:attr(data-content);
+          transform-origin: 50% 100%;
+          display: block;
+          -webkit-animation-name: flipBounce;
+           animation-name: flipBounce;
+          -webkit-animation-duration: 1s;
+          animation-duration: 1s;
+          top: 0;
+          left: 0;
+
+        }
+        @keyframes flipBounce
+        {
+          30%
+          {
+              transform: rotateX(96deg);
+          }
+          60%
+          {
+              transform: rotateX(-20deg);
+          }
+          100%
+          {
+              transform: rotateX(0deg); 
+          }
+        }

source/specials/glitch.css

@@ -0,0 +1,47 @@
+        .animate__glitch
+        {
+          position: relative;
+          background: inherit; !important;
+          text-shadow: -3px 0 #F40102,-5px 0 #FBF700,2px 0 #0002FC,5px 0 #00F8FB;
+        }
+
+        .animate__glitch::after,.animate__glitch::before
+        {
+          content:attr(data-glitch);
+          position: absolute;
+          top: 0;
+          left: 0;
+          color: inherit !important;
+          text-shadow:none;
+        }
+
+        .animate__glitch::after
+        {
+          transform: translateX(2px);
+          background: inherit !important;
+          clip-path: polygon(0 0,100% 0,100% 30%,0 100%);
+          animation: glitch 0.2s 0.5s infinite;
+          -webkit-animation:glitch 0.2s 0.5s infinite;
+        }
+
+        .animate__glitch::before
+        {
+          transform: translateX(-3px);
+          background: inherit !important;
+          clip-path: polygon(0 60%,100% 0%,100% 100%,0 100%);
+          animation: glitch 0.2s infinite linear alternate;
+          -webkit-animation: glitch 0.2s infinite linear alternate;    
+        }
+
+        @keyframes glitch
+        {
+          from
+          {
+              opacity: 0;
+          }
+          to
+          {
+              opacity: 1;
+
+          }
+        }