@sandlada/material-design-css/motion/transition-utilities.css

A ready-made npm package for a collection of css styles in the material design style.

@layer material-design-system.motion.transition.duration {
    :root {
        --_transition-duration-short1     : var(--md-sys-motion-duration-short1, 50ms);
        --_transition-duration-short2     : var(--md-sys-motion-duration-short2, 100ms);
        --_transition-duration-short3     : var(--md-sys-motion-duration-short3, 150ms);
        --_transition-duration-short4     : var(--md-sys-motion-duration-short4, 200ms);
        --_transition-duration-medium1    : var(--md-sys-motion-duration-medium1, 250ms);
        --_transition-duration-medium2    : var(--md-sys-motion-duration-medium2, 300ms);
        --_transition-duration-medium3    : var(--md-sys-motion-duration-medium3, 350ms);
        --_transition-duration-medium4    : var(--md-sys-motion-duration-medium4, 400ms);
        --_transition-duration-long1      : var(--md-sys-motion-duration-long1, 450ms);
        --_transition-duration-long2      : var(--md-sys-motion-duration-long2, 500ms);
        --_transition-duration-long3      : var(--md-sys-motion-duration-long3, 550ms);
        --_transition-duration-long4      : var(--md-sys-motion-duration-long4, 600ms);
        --_transition-duration-extra-long1: var(--md-sys-motion-duration-extra-long1, 700ms);
        --_transition-duration-extra-long2: var(--md-sys-motion-duration-extra-long2, 800ms);
        --_transition-duration-extra-long3: var(--md-sys-motion-duration-extra-long3, 900ms);
        --_transition-duration-extra-long4: var(--md-sys-motion-duration-extra-long4, 1000ms);
    }
}

@layer material-design-system.motion.transition.duration {
    .transition-duration-short1 {
        transition-duration: var(--_transition-duration-short1);
    }
    .transition-duration-short2 {
        transition-duration: var(--_transition-duration-short2);
    }
    .transition-duration-short3 {
        transition-duration: var(--_transition-duration-short3);
    }
    .transition-duration-short4 {
        transition-duration: var(--_transition-duration-short4);
    }
    .transition-duration-medium1 {
        transition-duration: var(--_transition-duration-medium1);
    }
    .transition-duration-medium2 {
        transition-duration: var(--_transition-duration-medium2);
    }
    .transition-duration-medium3 {
        transition-duration: var(--_transition-duration-medium3);
    }
    .transition-duration-medium4 {
        transition-duration: var(--_transition-duration-medium4);
    }
    .transition-duration-long1 {
        transition-duration: var(--_transition-duration-long1);
    }
    .transition-duration-long2 {
        transition-duration: var(--_transition-duration-long2);
    }
    .transition-duration-long3 {
        transition-duration: var(--_transition-duration-long3);
    }
    .transition-duration-long4 {
        transition-duration: var(--_transition-duration-long4);
    }
    .transition-duration-extra-long1 {
        transition-duration: var(--_transition-duration-extra-long1);
    }
    .transition-duration-extra-long2 {
        transition-duration: var(--_transition-duration-extra-long2);
    }
    .transition-duration-extra-long3 {
        transition-duration: var(--_transition-duration-extra-long3);
    }
    .transition-duration-extra-long4 {
        transition-duration: var(--_transition-duration-extra-long4);
    }
}

@layer material-design-system.motion.transition.easing {
    :root {
        --_transition-emphasized: var(--md-sys-motion-easing-emphasized ,cubic-bezier(0.2, 0.0, 0, 1.0));
        --_transition-emphasized-decelerate: var(--md-sys-motion-easing-emphasized-decelerate ,cubic-bezier(0.05, 0.7, 0.1, 1.0));
        --_transition-emphasized-accelerate: var(--md-sys-motion-easing-emphasized-accelerate ,cubic-bezier(0.3, 0.0, 0.8, 0.15));
        --_transition-standard: var(--md-sys-motion-easing-standard ,cubic-bezier(0.2, 0.0, 0, 1.0));
        --_transition-standard-decelerate: var(--md-sys-motion-easing-standard-decelerate ,cubic-bezier(0, 0, 0, 1));
        --_transition-standard-accelerate: var(--md-sys-motion-easing-standard-accelerate ,cubic-bezier(0.3, 0, 1, 1));
    }
}

@layer material-design-system.motion.transition.easing {
    .transition-easing-emphasized {
        transition-timing-function: var(--_transition-emphasized);
    }
    .transition-easing-emphasized-decelerate {
        transition-timing-function: var(--_transition-emphasized-decelerate);
    }
    .transition-easing-emphasized-accelerate {
        transition-timing-function: var(--_transition-emphasized-accelerate);
    }
    .transition-easing-standard {
        transition-timing-function: var(--_transition-standard);
    }
    .transition-easing-standard-decelerate {
        transition-timing-function: var(--_transition-standard-decelerate);
    }
    .transition-easing-standard-accelerate {
        transition-timing-function: var(--_transition-standard-accelerate);
    }
}

@layer material-design-system.motion.transition.springs {
    :root {
        --_transition-easing-expressive-fast-spatial: cubic-bezier(0.42, 1.67, 0.21, 0.90);
        --_transition-easing-expressive-default-spatial: cubic-bezier(0.38, 1.21, 0.22, 1.00);
        --_transition-easing-expressive-slow-spatial: cubic-bezier(0.39, 1.29, 0.35, 0.98);
        --_transition-easing-expressive-fast-effects: cubic-bezier(0.31, 0.94, 0.34, 1.00);
        --_transition-easing-expressive-default-effects: cubic-bezier(0.34, 0.80, 0.34, 1.00);
        --_transition-easing-expressive-slow-effects: cubic-bezier(0.34, 0.88, 0.34, 1.00);
        --_transition-easing-standard-fast-spatial: cubic-bezier(0.27, 1.06, 0.18, 1.00);
        --_transition-easing-standard-default-spatial: cubic-bezier(0.27, 1.06, 0.18, 1.00);
        --_transition-easing-standard-slow-spatial: cubic-bezier(0.27, 1.06, 0.18, 1.00);
        --_transition-easing-standard-fast-effects: cubic-bezier(0.31, 0.94, 0.34, 1.00);
        --_transition-easing-standard-default-effects: cubic-bezier(0.34, 0.80, 0.34, 1.00);
        --_transition-easing-standard-slow-effects: cubic-bezier(0.34, 0.88, 0.34, 1.00);
        --_transition-duration-expressive-fast-spatial: 350ms;
        --_transition-duration-expressive-default-spatial: 500ms;
        --_transition-duration-expressive-slow-spatial: 650ms;
        --_transition-duration-expressive-fast-effects: 150ms;
        --_transition-duration-expressive-default-effects: 200ms;
        --_transition-duration-expressive-slow-effects: 300ms;
        --_transition-duration-standard-fast-spatial: 350ms;
        --_transition-duration-standard-default-spatial: 500ms;
        --_transition-duration-standard-slow-spatial: 750ms;
        --_transition-duration-standard-fast-effects: 150ms;
        --_transition-duration-standard-default-effects: 200ms;
        --_transition-duration-standard-slow-effects: 300ms;
    }
}

@layer material-design-system.motion.transition.springs.easing {
    .transition-easing-expressive-fast-spatial {
        transition-timing-function: var(--_transition-easing-expressive-fast-spatial);
    }
    .transition-easing-expressive-default-spatial {
        transition-timing-function: var(--_transition-easing-expressive-default-spatial);
    }
    .transition-easing-expressive-slow-spatial {
        transition-timing-function: var(--_transition-easing-expressive-slow-spatial);
    }
    .transition-easing-expressive-fast-effects {
        transition-timing-function: var(--_transition-easing-expressive-fast-effects);
    }
    .transition-easing-expressive-default-effects {
        transition-timing-function: var(--_transition-easing-expressive-default-effects);
    }
    .transition-easing-expressive-slow-effects {
        transition-timing-function: var(--_transition-easing-expressive-slow-effects);
    }
    .transition-easing-standard-fast-spatial {
    	transition-timing-function: var(--_transition-easing-standard-fast-spatial);
    }
    .transition-easing-standard-default-spatial {
    	transition-timing-function: var(--_transition-easing-standard-default-spatial);
    }
    .transition-easing-standard-slow-spatial {
    	transition-timing-function: var(--_transition-easing-standard-slow-spatial);
    }
    .transition-easing-standard-fast-effects {
    	transition-timing-function: var(--_transition-easing-standard-fast-effects);
    }
    .transition-easing-standard-default-effects {
    	transition-timing-function: var(--_transition-easing-standard-default-effects);
    }
    .transition-easing-standard-slow-effects {
    	transition-timing-function: var(--_transition-easing-standard-slow-effects);
    }
}

@layer material-design-system.motion.transition.springs.duration {
    .transition-duration-expressive-fast-spatial {
        transition-duration: var(--_transition-duration-expressive-fast-spatial);
    }
    .transition-duration-expressive-default-spatial {
        transition-duration: var(--_transition-duration-expressive-default-spatial);
    }
    .transition-duration-expressive-slow-spatial {
        transition-duration: var(--_transition-duration-expressive-slow-spatial);
    }
    .transition-duration-expressive-fast-effects {
        transition-duration: var(--_transition-duration-expressive-fast-effects);
    }
    .transition-duration-expressive-default-effects {
        transition-duration: var(--_transition-duration-expressive-default-effects);
    }
    .transition-duration-expressive-slow-effects {
        transition-duration: var(--_transition-duration-expressive-slow-effects);
    }
    .transition-duration-standard-fast-spatial {
        transition-duration: var(--_transition-duration-standard-fast-spatial);
    }
    .transition-duration-standard-default-spatial {
        transition-duration: var(--_transition-duration-standard-default-spatial);
    }
    .transition-duration-standard-slow-spatial {
        transition-duration: var(--_transition-duration-standard-slow-spatial);
    }
    .transition-duration-standard-fast-effects {
        transition-duration: var(--_transition-duration-standard-fast-effects);
    }
    .transition-duration-standard-default-effects {
        transition-duration: var(--_transition-duration-standard-default-effects);
    }
    .transition-duration-standard-slow-effects {
        transition-duration: var(--_transition-duration-standard-slow-effects);
    }
}