Animation

The animation property can be used to animate any CSS property such as color, background-color, width, height, etc. Each animation needs to be defined with the @keyframes at-rule, which is then called with the animation property, like so:

.element {
  animation: present-element 300ms ease-out-back;
  transform: translate3d(0, 100px, 0);
}

@keyframes present-element {
  to {
    transform: none;
  }
}

Animating modals & alerts

The Activity Details components and all alerts animate in when they appear. To replace the animation with another one, you only need to update the start value of the transform property.

For example, here’s how to make the modal bounce onto the screen:

.element {
  transform: scale3d(0.9, 0.9, 1);
}

You can configure your animation by setting its sub-properties. This lets you tweak the timing, duration, and other details of how the animation sequence should progress.

Note: If you want to learn more about CSS animations, visit the Mozilla documentation on CSS animations.

Animating other elements

Modals and alerts are currently the only components that have animation. But this doesn’t mean that you are limited to just those components. Matter of fact, Embassy of Dutch Creativity spiced up their schedule with all kinds of animations. Feel free to add animation to your schedule!