elementdrawing 1.0.0

package/src/css/animations.css

@@ -0,0 +1,779 @@
+/*
+ * ElementDrawing Framework - Animations CSS
+ * All animation keyframes and animation utility classes.
+ * Covers fade, slide, scale, spin, pulse, bounce, shake, ripple,
+ * toast, modal, drawer, collapse, expand, and skeleton loading.
+ *
+ * @version 1.0.0
+ * @license MIT
+ */
+
+/* ─── Fade Keyframes ───────────────────────────────────────────────────────── */
+
+@keyframes ed-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes ed-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes ed-fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes ed-fade-in-down {
+  from {
+    opacity: 0;
+    transform: translateY(-1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes ed-fade-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(-1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes ed-fade-in-right {
+  from {
+    opacity: 0;
+    transform: translateX(1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* ─── Slide Keyframes ──────────────────────────────────────────────────────── */
+
+@keyframes ed-slide-in-up {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes ed-slide-in-down {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes ed-slide-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes ed-slide-in-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes ed-slide-out-up {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-100%);
+  }
+}
+
+@keyframes ed-slide-out-down {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes ed-slide-out-left {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes ed-slide-out-right {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+/* ─── Scale Keyframes ──────────────────────────────────────────────────────── */
+
+@keyframes ed-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes ed-scale-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+
+@keyframes ed-scale-in-up {
+  from {
+    opacity: 0;
+    transform: scale(0.9) translateY(1rem);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes ed-scale-in-down {
+  from {
+    opacity: 0;
+    transform: scale(0.9) translateY(-1rem);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes ed-pop-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  70% {
+    transform: scale(1.05);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ─── Spin Keyframes ───────────────────────────────────────────────────────── */
+
+@keyframes ed-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes ed-spin-reverse {
+  from {
+    transform: rotate(360deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}
+
+@keyframes ed-spin-pulse {
+  0% {
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
+  100% {
+    transform: rotate(360deg);
+    opacity: 1;
+  }
+}
+
+/* ─── Pulse Keyframes ──────────────────────────────────────────────────────── */
+
+@keyframes ed-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes ed-pulse-ring {
+  0% {
+    transform: scale(0.8);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+@keyframes ed-pulse-scale {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
+
+/* ─── Bounce Keyframes ─────────────────────────────────────────────────────── */
+
+@keyframes ed-bounce {
+  0%, 20%, 53%, 100% {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transform: translateY(0);
+  }
+  40%, 43% {
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transform: translateY(-1rem);
+  }
+  70% {
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transform: translateY(-0.5rem);
+  }
+  80% {
+    transform: translateY(0);
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+  90% {
+    transform: translateY(-0.125rem);
+  }
+}
+
+@keyframes ed-bounce-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.3);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.05);
+  }
+  70% {
+    transform: scale(0.9);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes ed-bounce-out {
+  0% {
+    transform: scale(1);
+  }
+  25% {
+    transform: scale(0.95);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.3);
+  }
+}
+
+/* ─── Shake Keyframes ──────────────────────────────────────────────────────── */
+
+@keyframes ed-shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  10%, 30%, 50%, 70%, 90% {
+    transform: translateX(-0.25rem);
+  }
+  20%, 40%, 60%, 80% {
+    transform: translateX(0.25rem);
+  }
+}
+
+@keyframes ed-shake-x {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-0.5rem);
+  }
+  75% {
+    transform: translateX(0.5rem);
+  }
+}
+
+@keyframes ed-shake-y {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  25% {
+    transform: translateY(-0.5rem);
+  }
+  75% {
+    transform: translateY(0.5rem);
+  }
+}
+
+/* ─── Ripple Keyframes ─────────────────────────────────────────────────────── */
+
+@keyframes ed-ripple {
+  0% {
+    transform: scale(0);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
+@keyframes ed-ripple-center {
+  0% {
+    transform: scale(0);
+    opacity: 0.3;
+  }
+  100% {
+    transform: scale(2.5);
+    opacity: 0;
+  }
+}
+
+/* ─── Toast Keyframes ──────────────────────────────────────────────────────── */
+
+@keyframes ed-toast-slide-in-right {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes ed-toast-slide-out-right {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
+
+@keyframes ed-toast-slide-in-left {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes ed-toast-slide-out-left {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}
+
+@keyframes ed-toast-slide-in-up {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* ─── Modal Keyframes ──────────────────────────────────────────────────────── */
+
+@keyframes ed-modal-overlay-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes ed-modal-overlay-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes ed-modal-content-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes ed-modal-content-out {
+  from {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95) translateY(0.5rem);
+  }
+}
+
+/* ─── Drawer Keyframes ─────────────────────────────────────────────────────── */
+
+@keyframes ed-drawer-slide-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes ed-drawer-slide-out-left {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes ed-drawer-slide-in-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes ed-drawer-slide-out-right {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+/* ─── Collapse / Expand Keyframes ──────────────────────────────────────────── */
+
+@keyframes ed-collapse {
+  from {
+    max-height: var(--ed-collapse-height, 1000px);
+    opacity: 1;
+  }
+  to {
+    max-height: 0;
+    opacity: 0;
+    overflow: hidden;
+  }
+}
+
+@keyframes ed-expand {
+  from {
+    max-height: 0;
+    opacity: 0;
+    overflow: hidden;
+  }
+  to {
+    max-height: var(--ed-collapse-height, 1000px);
+    opacity: 1;
+  }
+}
+
+@keyframes ed-collapse-horizontal {
+  from {
+    max-width: var(--ed-collapse-width, 1000px);
+    opacity: 1;
+  }
+  to {
+    max-width: 0;
+    opacity: 0;
+    overflow: hidden;
+  }
+}
+
+@keyframes ed-expand-horizontal {
+  from {
+    max-width: 0;
+    opacity: 0;
+    overflow: hidden;
+  }
+  to {
+    max-width: var(--ed-collapse-width, 1000px);
+    opacity: 1;
+  }
+}
+
+/* ─── Skeleton Loading Keyframes ───────────────────────────────────────────── */
+
+@keyframes ed-skeleton-loading {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+@keyframes ed-skeleton-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
+@keyframes ed-skeleton-wave {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+/* ─── Animation Utility Classes ────────────────────────────────────────────── */
+
+/* Fade utilities */
+.ed-animate-fade-in { animation: ed-fade-in 300ms ease forwards; }
+.ed-animate-fade-out { animation: ed-fade-out 300ms ease forwards; }
+.ed-animate-fade-in-up { animation: ed-fade-in-up 300ms ease forwards; }
+.ed-animate-fade-in-down { animation: ed-fade-in-down 300ms ease forwards; }
+.ed-animate-fade-in-left { animation: ed-fade-in-left 300ms ease forwards; }
+.ed-animate-fade-in-right { animation: ed-fade-in-right 300ms ease forwards; }
+
+/* Slide utilities */
+.ed-animate-slide-in-up { animation: ed-slide-in-up 300ms ease forwards; }
+.ed-animate-slide-in-down { animation: ed-slide-in-down 300ms ease forwards; }
+.ed-animate-slide-in-left { animation: ed-slide-in-left 300ms ease forwards; }
+.ed-animate-slide-in-right { animation: ed-slide-in-right 300ms ease forwards; }
+.ed-animate-slide-out-up { animation: ed-slide-out-up 300ms ease forwards; }
+.ed-animate-slide-out-down { animation: ed-slide-out-down 300ms ease forwards; }
+.ed-animate-slide-out-left { animation: ed-slide-out-left 300ms ease forwards; }
+.ed-animate-slide-out-right { animation: ed-slide-out-right 300ms ease forwards; }
+
+/* Scale utilities */
+.ed-animate-scale-in { animation: ed-scale-in 200ms ease forwards; }
+.ed-animate-scale-out { animation: ed-scale-out 200ms ease forwards; }
+.ed-animate-pop-in { animation: ed-pop-in 300ms ease forwards; }
+.ed-animate-scale-in-up { animation: ed-scale-in-up 300ms ease forwards; }
+
+/* Spin utilities */
+.ed-animate-spin { animation: ed-spin 1s linear infinite; }
+.ed-animate-spin-reverse { animation: ed-spin-reverse 1s linear infinite; }
+.ed-animate-spin-pulse { animation: ed-spin-pulse 1.5s linear infinite; }
+
+/* Pulse utilities */
+.ed-animate-pulse { animation: ed-pulse 2s ease-in-out infinite; }
+.ed-animate-pulse-ring { animation: ed-pulse-ring 1.5s ease-out infinite; }
+.ed-animate-pulse-scale { animation: ed-pulse-scale 2s ease-in-out infinite; }
+
+/* Bounce utilities */
+.ed-animate-bounce { animation: ed-bounce 1s ease infinite; }
+.ed-animate-bounce-in { animation: ed-bounce-in 500ms ease forwards; }
+.ed-animate-bounce-out { animation: ed-bounce-out 500ms ease forwards; }
+
+/* Shake utilities */
+.ed-animate-shake { animation: ed-shake 500ms ease; }
+.ed-animate-shake-x { animation: ed-shake-x 300ms ease; }
+.ed-animate-shake-y { animation: ed-shake-y 300ms ease; }
+
+/* Ripple utility */
+.ed-animate-ripple { animation: ed-ripple 600ms ease-out; }
+
+/* Toast animation utilities */
+.ed-animate-toast-in-right { animation: ed-toast-slide-in-right 400ms ease forwards; }
+.ed-animate-toast-out-right { animation: ed-toast-slide-out-right 300ms ease forwards; }
+.ed-animate-toast-in-left { animation: ed-toast-slide-in-left 400ms ease forwards; }
+.ed-animate-toast-out-left { animation: ed-toast-slide-out-left 300ms ease forwards; }
+.ed-animate-toast-in-up { animation: ed-toast-slide-in-up 400ms ease forwards; }
+
+/* Modal animation utilities */
+.ed-animate-modal-overlay-in { animation: ed-modal-overlay-in 200ms ease forwards; }
+.ed-animate-modal-overlay-out { animation: ed-modal-overlay-out 200ms ease forwards; }
+.ed-animate-modal-in { animation: ed-modal-content-in 300ms ease forwards; }
+.ed-animate-modal-out { animation: ed-modal-content-out 200ms ease forwards; }
+
+/* Drawer animation utilities */
+.ed-animate-drawer-in-left { animation: ed-drawer-slide-in-left 300ms ease forwards; }
+.ed-animate-drawer-out-left { animation: ed-drawer-slide-out-left 200ms ease forwards; }
+.ed-animate-drawer-in-right { animation: ed-drawer-slide-in-right 300ms ease forwards; }
+.ed-animate-drawer-out-right { animation: ed-drawer-slide-out-right 200ms ease forwards; }
+
+/* Collapse / Expand utilities */
+.ed-animate-collapse { animation: ed-collapse 300ms ease forwards; }
+.ed-animate-expand { animation: ed-expand 300ms ease forwards; }
+.ed-animate-collapse-h { animation: ed-collapse-horizontal 300ms ease forwards; }
+.ed-animate-expand-h { animation: ed-expand-horizontal 300ms ease forwards; }
+
+/* Skeleton loading utilities */
+.ed-skeleton {
+  background: linear-gradient(90deg, var(--ed-gray-200) 25%, var(--ed-gray-100) 50%, var(--ed-gray-200) 75%);
+  background-size: 400% 100%;
+  animation: ed-skeleton-loading 1.5s ease-in-out infinite;
+  border-radius: var(--ed-border-radius);
+}
+
+.ed-skeleton-circle {
+  border-radius: 50%;
+}
+
+.ed-skeleton-text {
+  height: 0.75rem;
+  margin-bottom: 0.5rem;
+  border-radius: var(--ed-border-radius-sm);
+}
+
+.ed-skeleton-text:last-child {
+  width: 75%;
+}
+
+.ed-skeleton-heading {
+  height: 1.5rem;
+  width: 50%;
+  margin-bottom: 1rem;
+  border-radius: var(--ed-border-radius-sm);
+}
+
+.ed-skeleton-image {
+  width: 100%;
+  height: 12rem;
+  border-radius: var(--ed-border-radius);
+}
+
+.ed-skeleton-avatar {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+}
+
+.ed-skeleton-button {
+  height: 2.25rem;
+  width: 6rem;
+  border-radius: var(--ed-border-radius);
+}
+
+/* ─── Animation Duration Utilities ─────────────────────────────────────────── */
+
+.ed-duration-75 { animation-duration: 75ms; }
+.ed-duration-100 { animation-duration: 100ms; }
+.ed-duration-150 { animation-duration: 150ms; }
+.ed-duration-200 { animation-duration: 200ms; }
+.ed-duration-300 { animation-duration: 300ms; }
+.ed-duration-500 { animation-duration: 500ms; }
+.ed-duration-700 { animation-duration: 700ms; }
+.ed-duration-1000 { animation-duration: 1000ms; }
+
+/* ─── Animation Timing Utilities ───────────────────────────────────────────── */
+
+.ed-easing-linear { animation-timing-function: linear; }
+.ed-easing-ease { animation-timing-function: ease; }
+.ed-easing-ease-in { animation-timing-function: ease-in; }
+.ed-easing-ease-out { animation-timing-function: ease-out; }
+.ed-easing-ease-in-out { animation-timing-function: ease-in-out; }
+
+/* ─── Animation Delay Utilities ────────────────────────────────────────────── */
+
+.ed-delay-0 { animation-delay: 0ms; }
+.ed-delay-75 { animation-delay: 75ms; }
+.ed-delay-100 { animation-delay: 100ms; }
+.ed-delay-150 { animation-delay: 150ms; }
+.ed-delay-200 { animation-delay: 200ms; }
+.ed-delay-300 { animation-delay: 300ms; }
+.ed-delay-500 { animation-delay: 500ms; }
+.ed-delay-700 { animation-delay: 700ms; }
+.ed-delay-1000 { animation-delay: 1000ms; }
+
+/* ─── Animation Fill Mode Utilities ────────────────────────────────────────── */
+
+.ed-fill-none { animation-fill-mode: none; }
+.ed-fill-forwards { animation-fill-mode: forwards; }
+.ed-fill-backwards { animation-fill-mode: backwards; }
+.ed-fill-both { animation-fill-mode: both; }
+
+/* ─── Animation Iteration Count ────────────────────────────────────────────── */
+
+.ed-iterate-once { animation-iteration-count: 1; }
+.ed-iterate-infinite { animation-iteration-count: infinite; }
+.ed-iterate-2 { animation-iteration-count: 2; }
+.ed-iterate-3 { animation-iteration-count: 3; }
+
+/* ─── Animation Play State ─────────────────────────────────────────────────── */
+
+.ed-animate-paused { animation-play-state: paused; }
+.ed-animate-running { animation-play-state: running; }