@datafluxgrid/fluxgrid-css 1.0.5 → 1.0.7

package/src/css/animation.css

@@ -7,6 +7,15 @@
   }
 }
 
+@keyframes c-spin-reverse {
+  from {
+    transform: rotate(360deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}
+
 @keyframes c-ping {
   75%,
   100% {
@@ -25,6 +34,16 @@
   }
 }
 
+@keyframes c-pulse-scale {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
+
 @keyframes c-bounce {
   0%,
   100% {
@@ -37,6 +56,18 @@
   }
 }
 
+@keyframes c-bounce-x {
+  0%,
+  100% {
+    transform: translateX(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: translateX(0);
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
 @keyframes c-shake {
   0%,
   100% {
@@ -57,6 +88,26 @@
   }
 }
 
+@keyframes c-shake-y {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: translateY(-4px);
+  }
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: translateY(4px);
+  }
+}
+
 @keyframes c-fade-in {
   from {
     opacity: 0;
@@ -75,47 +126,141 @@
   }
 }
 
-@keyframes c-slide-in-up {
+@keyframes c-fade-in-up {
   from {
+    opacity: 0;
     transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes c-fade-in-down {
+  from {
     opacity: 0;
+    transform: translateY(-20px);
   }
   to {
+    opacity: 1;
     transform: translateY(0);
+  }
+}
+
+@keyframes c-fade-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
     opacity: 1;
+    transform: translateX(0);
   }
 }
 
-@keyframes c-slide-in-down {
+@keyframes c-fade-in-right {
   from {
-    transform: translateY(-20px);
     opacity: 0;
+    transform: translateX(20px);
   }
   to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes c-fade-out-up {
+  from {
+    opacity: 1;
     transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+}
+
+@keyframes c-fade-out-down {
+  from {
     opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+}
+
+@keyframes c-slide-in-up {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes c-slide-in-down {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
   }
 }
 
 @keyframes c-slide-in-left {
   from {
-    transform: translateX(-20px);
-    opacity: 0;
+    transform: translateX(-100%);
   }
   to {
     transform: translateX(0);
-    opacity: 1;
   }
 }
 
 @keyframes c-slide-in-right {
   from {
-    transform: translateX(20px);
-    opacity: 0;
+    transform: translateX(100%);
   }
   to {
     transform: translateX(0);
-    opacity: 1;
+  }
+}
+
+@keyframes c-slide-out-up {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-100%);
+  }
+}
+
+@keyframes c-slide-out-down {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes c-slide-out-left {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes c-slide-out-right {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
   }
 }
 
@@ -141,21 +286,87 @@
   }
 }
 
+@keyframes c-scale-in-x {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+
+@keyframes c-scale-in-y {
+  from {
+    transform: scaleY(0);
+  }
+  to {
+    transform: scaleY(1);
+  }
+}
+
+@keyframes c-zoom-in {
+  from {
+    transform: scale(0);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes c-zoom-out {
+  from {
+    transform: scale(1);
+    opacity: 1;
+  }
+  to {
+    transform: scale(0);
+    opacity: 0;
+  }
+}
+
 @keyframes c-flip-x {
   from {
-    transform: rotateX(0deg);
+    transform: perspective(400px) rotateX(90deg);
+    opacity: 0;
   }
   to {
-    transform: rotateX(360deg);
+    transform: perspective(400px) rotateX(0deg);
+    opacity: 1;
   }
 }
 
 @keyframes c-flip-y {
   from {
-    transform: rotateY(0deg);
+    transform: perspective(400px) rotateY(90deg);
+    opacity: 0;
+  }
+  to {
+    transform: perspective(400px) rotateY(0deg);
+    opacity: 1;
+  }
+}
+
+@keyframes c-rotate-in {
+  from {
+    transform: rotate(-180deg);
+    opacity: 0;
+  }
+  to {
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+}
+
+@keyframes c-rotate-out {
+  from {
+    transform: rotate(0deg);
+    opacity: 1;
   }
   to {
-    transform: rotateY(360deg);
+    transform: rotate(180deg);
+    opacity: 0;
   }
 }
 
@@ -197,6 +408,140 @@
   }
 }
 
+@keyframes c-float-x {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(8px);
+  }
+}
+
+@keyframes c-swing {
+  20% {
+    transform: rotate(15deg);
+  }
+  40% {
+    transform: rotate(-10deg);
+  }
+  60% {
+    transform: rotate(5deg);
+  }
+  80% {
+    transform: rotate(-5deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+@keyframes c-rubber-band {
+  0% {
+    transform: scaleX(1);
+  }
+  30% {
+    transform: scaleX(1.25) scaleY(0.75);
+  }
+  40% {
+    transform: scaleX(0.75) scaleY(1.25);
+  }
+  50% {
+    transform: scaleX(1.15) scaleY(0.85);
+  }
+  65% {
+    transform: scaleX(0.95) scaleY(1.05);
+  }
+  75% {
+    transform: scaleX(1.05) scaleY(0.95);
+  }
+  100% {
+    transform: scaleX(1) scaleY(1);
+  }
+}
+
+@keyframes c-jello {
+  0%,
+  11.1%,
+  100% {
+    transform: none;
+  }
+  22.2% {
+    transform: skewX(-12.5deg) skewY(-12.5deg);
+  }
+  33.3% {
+    transform: skewX(6.25deg) skewY(6.25deg);
+  }
+  44.4% {
+    transform: skewX(-3.125deg) skewY(-3.125deg);
+  }
+  55.5% {
+    transform: skewX(1.5625deg) skewY(1.5625deg);
+  }
+  66.6% {
+    transform: skewX(-0.78125deg) skewY(-0.78125deg);
+  }
+  77.7% {
+    transform: skewX(0.390625deg) skewY(0.390625deg);
+  }
+  88.8% {
+    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+  }
+}
+
+@keyframes c-tada {
+  0% {
+    transform: scaleX(1);
+  }
+  10%,
+  20% {
+    transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
+  }
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
+  }
+  40%,
+  60%,
+  80% {
+    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
+  }
+  100% {
+    transform: scaleX(1);
+  }
+}
+
+@keyframes c-blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
+@keyframes c-typewriter {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}
+
+@keyframes c-cursor-blink {
+  0%,
+  100% {
+    border-color: transparent;
+  }
+  50% {
+    border-color: currentColor;
+  }
+}
+
 @keyframes c-skeleton {
   0% {
     background-position: -200% 0;
@@ -206,12 +551,46 @@
   }
 }
 
-@keyframes c-blink {
+@keyframes c-shimmer {
+  0% {
+    background-position: -1000px 0;
+  }
+  100% {
+    background-position: 1000px 0;
+  }
+}
+
+@keyframes c-glow {
   0%,
   100% {
-    opacity: 1;
+    box-shadow: 0 0 5px var(--c-primary-500);
   }
   50% {
+    box-shadow:
+      0 0 20px var(--c-primary-500),
+      0 0 40px var(--c-primary-400);
+  }
+}
+
+@keyframes c-glow-text {
+  0%,
+  100% {
+    text-shadow: 0 0 4px var(--c-primary-500);
+  }
+  50% {
+    text-shadow:
+      0 0 16px var(--c-primary-400),
+      0 0 32px var(--c-primary-300);
+  }
+}
+
+@keyframes c-ripple {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(4);
     opacity: 0;
   }
 }
@@ -225,27 +604,147 @@
   }
 }
 
+@keyframes c-morph {
+  0%,
+  100% {
+    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
+  }
+  34% {
+    border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
+  }
+  67% {
+    border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
+  }
+}
+
+@keyframes c-flip-card {
+  from {
+    transform: perspective(400px) rotateY(0);
+  }
+  to {
+    transform: perspective(400px) rotateY(180deg);
+  }
+}
+
+@keyframes c-roll-in {
+  from {
+    opacity: 0;
+    transform: translateX(-100%) rotate(-120deg);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) rotate(0deg);
+  }
+}
+
+@keyframes c-drop-in {
+  from {
+    opacity: 0;
+    transform: translateY(-60px) scaleY(1.3);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+  }
+}
+
+@keyframes c-blur-in {
+  from {
+    opacity: 0;
+    filter: blur(12px);
+  }
+  to {
+    opacity: 1;
+    filter: blur(0);
+  }
+}
+
+@keyframes c-blur-out {
+  from {
+    opacity: 1;
+    filter: blur(0);
+  }
+  to {
+    opacity: 0;
+    filter: blur(12px);
+  }
+}
+
+@keyframes c-progress {
+  from {
+    width: 0%;
+  }
+  to {
+    width: 100%;
+  }
+}
+
+@keyframes c-counter {
+  from {
+    --num: 0;
+  }
+  to {
+    --num: 100;
+  }
+}
+
 .c-animate-spin {
   animation: c-spin 1s linear infinite;
 }
+.c-animate-spin-reverse {
+  animation: c-spin-reverse 1s linear infinite;
+}
+.c-animate-spin-slow {
+  animation: c-spin 3s linear infinite;
+}
+.c-animate-spin-fast {
+  animation: c-spin 0.5s linear infinite;
+}
 .c-animate-ping {
   animation: c-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
 }
 .c-animate-pulse {
   animation: c-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
+.c-animate-pulse-scale {
+  animation: c-pulse-scale 2s ease-in-out infinite;
+}
 .c-animate-bounce {
   animation: c-bounce 1s infinite;
 }
+.c-animate-bounce-x {
+  animation: c-bounce-x 1s infinite;
+}
 .c-animate-shake {
   animation: c-shake 0.5s ease-in-out;
 }
+.c-animate-shake-y {
+  animation: c-shake-y 0.5s ease-in-out;
+}
 .c-animate-fade-in {
   animation: c-fade-in 300ms ease-out forwards;
 }
 .c-animate-fade-out {
   animation: c-fade-out 300ms ease-in forwards;
 }
+.c-animate-fade-in-up {
+  animation: c-fade-in-up 400ms ease-out forwards;
+}
+.c-animate-fade-in-down {
+  animation: c-fade-in-down 400ms ease-out forwards;
+}
+.c-animate-fade-in-left {
+  animation: c-fade-in-left 400ms ease-out forwards;
+}
+.c-animate-fade-in-right {
+  animation: c-fade-in-right 400ms ease-out forwards;
+}
+.c-animate-fade-out-up {
+  animation: c-fade-out-up 300ms ease-in forwards;
+}
+.c-animate-fade-out-down {
+  animation: c-fade-out-down 300ms ease-in forwards;
+}
 .c-animate-slide-up {
   animation: c-slide-in-up 300ms ease-out forwards;
 }
@@ -258,12 +757,48 @@
 .c-animate-slide-right {
   animation: c-slide-in-right 300ms ease-out forwards;
 }
+.c-animate-slide-out-up {
+  animation: c-slide-out-up 300ms ease-in forwards;
+}
+.c-animate-slide-out-down {
+  animation: c-slide-out-down 300ms ease-in forwards;
+}
+.c-animate-slide-out-left {
+  animation: c-slide-out-left 300ms ease-in forwards;
+}
+.c-animate-slide-out-right {
+  animation: c-slide-out-right 300ms ease-in forwards;
+}
 .c-animate-scale-in {
   animation: c-scale-in 200ms ease-out forwards;
 }
 .c-animate-scale-out {
   animation: c-scale-out 200ms ease-in forwards;
 }
+.c-animate-scale-in-x {
+  animation: c-scale-in-x 300ms ease-out forwards;
+}
+.c-animate-scale-in-y {
+  animation: c-scale-in-y 300ms ease-out forwards;
+}
+.c-animate-zoom-in {
+  animation: c-zoom-in 300ms ease-out forwards;
+}
+.c-animate-zoom-out {
+  animation: c-zoom-out 300ms ease-in forwards;
+}
+.c-animate-flip-x {
+  animation: c-flip-x 400ms ease-out forwards;
+}
+.c-animate-flip-y {
+  animation: c-flip-y 400ms ease-out forwards;
+}
+.c-animate-rotate-in {
+  animation: c-rotate-in 400ms ease-out forwards;
+}
+.c-animate-rotate-out {
+  animation: c-rotate-out 400ms ease-in forwards;
+}
 .c-animate-wiggle {
   animation: c-wiggle 1s ease-in-out infinite;
 }
@@ -273,13 +808,70 @@
 .c-animate-float {
   animation: c-float 3s ease-in-out infinite;
 }
+.c-animate-float-x {
+  animation: c-float-x 3s ease-in-out infinite;
+}
+.c-animate-swing {
+  animation: c-swing 1s ease-in-out;
+}
+.c-animate-rubber-band {
+  animation: c-rubber-band 1s ease-in-out;
+}
+.c-animate-jello {
+  animation: c-jello 1s ease-in-out;
+}
+.c-animate-tada {
+  animation: c-tada 1s ease-in-out;
+}
 .c-animate-blink {
   animation: c-blink 1s step-end infinite;
 }
+.c-animate-glow {
+  animation: c-glow 2s ease-in-out infinite;
+}
+.c-animate-glow-text {
+  animation: c-glow-text 2s ease-in-out infinite;
+}
+.c-animate-ripple {
+  animation: c-ripple 600ms ease-out forwards;
+}
+.c-animate-draw {
+  animation: c-draw 1s ease-out forwards;
+}
+.c-animate-morph {
+  animation: c-morph 8s ease-in-out infinite;
+}
+.c-animate-flip-card {
+  animation: c-flip-card 600ms ease-in-out forwards;
+}
+.c-animate-roll-in {
+  animation: c-roll-in 600ms ease-out forwards;
+}
+.c-animate-drop-in {
+  animation: c-drop-in 400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+}
+.c-animate-blur-in {
+  animation: c-blur-in 400ms ease-out forwards;
+}
+.c-animate-blur-out {
+  animation: c-blur-out 400ms ease-in forwards;
+}
+.c-animate-progress {
+  animation: c-progress 2s ease-out forwards;
+}
 .c-animate-none {
   animation: none;
 }
 
+.c-animate-typewriter {
+  overflow: hidden;
+  white-space: nowrap;
+  border-right: 2px solid currentColor;
+  animation:
+    c-typewriter 3s steps(40) forwards,
+    c-cursor-blink 0.75s step-end infinite;
+}
+
 .c-animate-skeleton {
   background: linear-gradient(
     90deg,
@@ -291,6 +883,17 @@
   animation: c-skeleton 1.5s infinite;
 }
 
+.c-animate-shimmer {
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.4) 50%,
+    transparent 100%
+  );
+  background-size: 1000px 100%;
+  animation: c-shimmer 2s infinite;
+}
+
 .c-animate-delay-75 {
   animation-delay: 75ms;
 }
@@ -315,6 +918,12 @@
 .c-animate-delay-1000 {
   animation-delay: 1000ms;
 }
+.c-animate-delay-1500 {
+  animation-delay: 1500ms;
+}
+.c-animate-delay-2000 {
+  animation-delay: 2000ms;
+}
 
 .c-animate-duration-75 {
   animation-duration: 75ms;
@@ -343,19 +952,22 @@
 .c-animate-duration-2000 {
   animation-duration: 2000ms;
 }
+.c-animate-duration-3000 {
+  animation-duration: 3000ms;
+}
 
 .c-animate-once {
   animation-iteration-count: 1;
 }
-.c-animate-infinite {
-  animation-iteration-count: infinite;
-}
-.c-animate-repeat-2 {
+.c-animate-twice {
   animation-iteration-count: 2;
 }
 .c-animate-repeat-3 {
   animation-iteration-count: 3;
 }
+.c-animate-infinite {
+  animation-iteration-count: infinite;
+}
 
 .c-animate-fill-none {
   animation-fill-mode: none;
@@ -370,6 +982,25 @@
   animation-fill-mode: both;
 }
 
+.c-animate-ease-linear {
+  animation-timing-function: linear;
+}
+.c-animate-ease-in {
+  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
+}
+.c-animate-ease-out {
+  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+.c-animate-ease-in-out {
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+.c-animate-ease-bounce {
+  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.c-animate-ease-spring {
+  animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
 .c-animate-running {
   animation-play-state: running;
 }
@@ -377,16 +1008,25 @@
   animation-play-state: paused;
 }
 
+.c-animate-direction-normal {
+  animation-direction: normal;
+}
+.c-animate-direction-reverse {
+  animation-direction: reverse;
+}
+.c-animate-direction-alternate {
+  animation-direction: alternate;
+}
+.c-animate-direction-alt-rev {
+  animation-direction: alternate-reverse;
+}
+
 @media (prefers-reduced-motion: reduce) {
-  .c-animate-spin,
-  .c-animate-ping,
-  .c-animate-pulse,
-  .c-animate-bounce,
-  .c-animate-shake,
-  .c-animate-wiggle,
-  .c-animate-heartbeat,
-  .c-animate-float,
-  .c-animate-skeleton {
-    animation: none;
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
   }
 }