Animations

As mentioned in the styling section, how the dialog looks is entirely up to the implementor (you). The following boilerplate code can be used to add a simple entering animation to the dialog.

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

@keyframes slide-up {
  from {
    transform: translateY(10%);
  }
}

.dialog-overlay {
  animation: fade-in 200ms both;
}

/**
 * 1. Add an animation delay equal to the overlay animation duration to
 *    wait for the overlay to appear before animation in the dialog.
 */
.dialog-content {
  animation: fade-in 400ms 200ms both, slide-up 400ms 200ms both; /* 1 */
}

It is recommended you consider your user’s motion preferences by utilizing the prefers-reduced-motion media query when adding animations to your CSS. For example, you can place a small snippet below the animation or transition code from above with:

@media (prefers-reduced-motion: reduce) {
  .dialog-overlay,
  .dialog-content {
    animation: none;
  }
}

This way, the animations are completely off if the user prefers reduced motion. This approach is only suitable if core functionality is not removed by doing so. In our case, the core showing and hiding of the dialog is done through dialog[aria-hidden='true'] which is unrelated to the animation code entirely.

This step is crucial for users with vestibular motion disorders:

• Designing With Reduced Motion For Motion Sensitivities by Val Head
• prefers-reduced-motion: Taking a no-motion-first approach to animations by Tatiana Mac
• Implementing a reduced-motion mode by Kitty Giraudel
• MDN’s prefers-reduced-motion docs