@primer/react-brand/lib/design-tokens/css/tokens/functional/animation/base.css

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

/**
 * Do not edit directly
 * Generated on Wed, 17 Dec 2025 14:40:36 GMT
 */

:root {
  --brand-animation-variant-scaleInLeft-end: 1;
  --brand-animation-variant-scaleInLeft-start: 0.90;
  --brand-animation-variant-scaleInLeft-distance: 1.25rem;
  --brand-animation-variant-scaleInRight-end: 1;
  --brand-animation-variant-scaleInRight-start: 0.90;
  --brand-animation-variant-scaleInRight-distance: -1.25rem;
  --brand-animation-variant-scaleInTop-distance: ;
  --brand-animation-variant-scaleIn-end: 1;
  --brand-animation-variant-scaleIn-start: 0.96;
  --brand-animation-variant-scaleInDown-end: 1;
  --brand-animation-variant-scaleInDown-start: 0;
  --brand-animation-variant-scaleInDown-distance: -3.125rem;
  --brand-animation-variant-scaleInUp-end: 1;
  --brand-animation-variant-scaleInUp-start: 0.96;
  --brand-animation-variant-scaleInUp-distance: 1.5rem;
  --brand-animation-variant-slideInRight-distance: -0.9375rem;
  --brand-animation-variant-slideInLeft-distance: 0.9375rem;
  --brand-animation-variant-slideInDown-distance: -0.9375rem;
  --brand-animation-variant-slideInUp-distance: 0.9375rem;
  --brand-animation-transition-default: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default), transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);
  --brand-animation-easing-glide: cubic-bezier(0.33, 1, 0.68, 1);
  --brand-animation-easing-default: cubic-bezier(0.16, 1, 0.3, 1);
  --brand-animation-duration-extended: 0.7s;
  --brand-animation-duration-default: 0.6s;
  --brand-animation-duration-fast: 0.3s;
  --brand-animation-duration-faster: 0.2s;
}