Transitions

There are five different transition durations to work with.
A good rule of thumb is to use an as short duration as possible, and longer durations on bigger element/movements.

Most elements in the UI Library already has a suitable transition added to themselfs. So this page can mostly be seen as a general guide of behaviour.

For those wanting to deep dive in the subject:
The ultimate guide to proper use of animation in UX

Transitions

Component status: WIP

.designsystem-box.designsystem-box--very-fast

Very fast

.designsystem-box.designsystem-box--fast

Fast

.designsystem-box.designsystem-box--normal

Normal

.designsystem-box.designsystem-box--slow

Slow

.designsystem-box.designsystem-box--very-slow

Very slow

<div class=""></div>

Se mere

Developer notes

SCSS syntax

The SCSS variable includes the duration and easing.

To use it: include what property should transition, followed by the variable.

    .demo {
        transition: background-color $transition-fast;
        background-color: lightgrey;

        &:hover {
            background-color: darkgrey;
        }
    }

Se mere

Developer notes

SCSS syntax

The SCSS variable includes the duration and easing.

To use it: include what property should transition, followed by the variable.

[title]