@radix-ui/themes/src/components/animations.css

[](https://radix-ui.com/themes)

@keyframes rt-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes rt-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes rt-slide-from-top {
  from {
    transform: translateY(4px) scale(0.97);
  }
  to {
    transform: translateY(0) scale(1);
  }
}

@keyframes rt-slide-to-top {
  from {
    transform: translateY(0) scale(1);
  }
  to {
    transform: translateY(4px) scale(0.97);
  }
}

@keyframes rt-slide-from-bottom {
  from {
    transform: translateY(-4px) scale(0.97);
  }
  to {
    transform: translateY(0) scale(1);
  }
}

@keyframes rt-slide-to-bottom {
  from {
    transform: translateY(0) scale(1);
  }
  to {
    transform: translateY(-4px) scale(0.97);
  }
}

@keyframes rt-slide-from-left {
  from {
    transform: translateX(4px) scale(0.97);
  }
  to {
    transform: translateX(0) scale(1);
  }
}

@keyframes rt-slide-to-left {
  from {
    transform: translateX(0) scale(1);
  }
  to {
    transform: translateX(4px) scale(0.97);
  }
}

@keyframes rt-slide-from-right {
  from {
    transform: translateX(-4px) scale(0.97);
  }
  to {
    transform: translateX(0) scale(1);
  }
}

@keyframes rt-slide-to-right {
  from {
    transform: translateX(0) scale(1);
  }
  to {
    transform: translateX(-4px) scale(0.97);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .rt-PopperContent {
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);

    &:where([data-state='open']) {
      animation-duration: 160ms;

      &:where([data-side='top']) {
        animation-name: rt-slide-from-top, rt-fade-in;
      }
      &:where([data-side='bottom']) {
        animation-name: rt-slide-from-bottom, rt-fade-in;
      }
      &:where([data-side='left']) {
        animation-name: rt-slide-from-left, rt-fade-in;
      }
      &:where([data-side='right']) {
        animation-name: rt-slide-from-right, rt-fade-in;
      }
    }

    &:where([data-state='closed']) {
      animation-duration: 100ms;

      &:where([data-side='top']) {
        animation-name: rt-slide-to-top, rt-fade-out;
      }
      &:where([data-side='bottom']) {
        animation-name: rt-slide-to-bottom, rt-fade-out;
      }
      &:where([data-side='left']) {
        animation-name: rt-slide-to-left, rt-fade-out;
      }
      &:where([data-side='right']) {
        animation-name: rt-slide-to-right, rt-fade-out;
      }
    }
  }
}