@casoon/dragonfly/utilities/mixins/transitions.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/*
 * Transitions Mixins
 *
 * Mixins für Übergänge und Animationen.
 * Diese Mixins können in anderen CSS-Dateien verwendet werden.
 */

@layer utilities.mixins {
  /* Transition-Mixins */
  @define-mixin transition-base {
    transition-duration: var(--transition-normal, 300ms);
    transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: var(--transition-timing-ease, ease);
  }

  @define-mixin transition-fast {
    transition-duration: var(--transition-fast, 150ms);
    transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: var(--transition-timing-ease, ease);
  }

  @define-mixin transition-slow {
    transition-duration: var(--transition-slow, 500ms);
    transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: var(--transition-timing-ease, ease);
  }

  /* Spezifische Transition-Mixins */
  @define-mixin transition-transform {
    transition-duration: var(--transition-normal, 300ms);
    transition-property: transform;
    transition-timing-function: var(--transition-timing-ease, ease);
  }

  @define-mixin transition-opacity {
    transition-duration: var(--transition-normal, 300ms);
    transition-property: opacity;
    transition-timing-function: var(--transition-timing-ease, ease);
  }

  @define-mixin transition-colors {
    transition-duration: var(--transition-normal, 300ms);
    transition-property: color, background-color, border-color, fill, stroke;
    transition-timing-function: var(--transition-timing-ease, ease);
  }

  @define-mixin transition-shadow {
    transition-duration: var(--transition-normal, 300ms);
    transition-property: box-shadow;
    transition-timing-function: var(--transition-timing-ease, ease);
  }

  /* Animation-Mixins */
  @define-mixin animation-fadeIn {
    animation-duration: 300ms;
    animation-fill-mode: both;
    animation-name: fadeIn;
    animation-timing-function: ease-out;
  }

  @define-mixin animation-scaleIn {
    animation-duration: 300ms;
    animation-fill-mode: both;
    animation-name: scaleIn;
    animation-timing-function: ease-out;
  }

  @define-mixin animation-slideInUp {
    animation-duration: 300ms;
    animation-fill-mode: both;
    animation-name: slideInUp;
    animation-timing-function: ease-out;
  }

  @define-mixin animation-pulse {
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: pulse;
    animation-timing-function: ease-in-out;
  }
}