Animation

Motion brings meaning and a sense of life to the experience. It should be purposeful, intuitive, and seamless. It should help users be more productive and never slow them down.

There are four main components that go into an animation: Easing, Duration, Effect and Target. Below describes each of these components in detail and how to combine them into a successful animation.

.button-submit-invalid {
    animation: shake-x var(--c6-duration-5) var(--c6-ease-in-out);
    <!-- or -->
    animation: var(--c6-animation-button-shake);
}

Easing

Easing defines how an animation changes speed over the course of the action. In the real world, objects tend to accelerate and decelerate as they move. Carbon uses the following different types of easing.

Ease-in

 --c6-ease-in: cubic-bezier(0.25, 0, 1, 1);

Ease-out

    --c6-ease-out: cubic-bezier(0, 0, 0.75, 1);

Ease-in-out

    --c6-ease-in-out: cubic-bezier(0.1, 0, 0.9, 1);

Elastic

    --c6-ease-elastic: cubic-bezier(0.5, 0.75, 0.75, 1.25);

Squish

    --c6-ease-squish: cubic-bezier(0.5, -0.1, 0.1, 1.5);

Duration

Be mindful when choosing the right duration. Durations should take into account the complexity of the element you are animating, the easing, and the scale of the motion. We've split interactions into two main portions to account for different circumstances animations can be used in.

Micro Animations

Micro animations cover a small amount of ground. Examples are color fades, hovers, accordions, tooltips, etc. These animations are typically quick and to the point. They are mostly about smoothing continuity between state changes of components and thus do not require flashy or long animations that better suit animations that "set the stage".

    --c6-duration-1: 130ms;
    --c6-duration-2: 160ms;
    --c6-duration-3: 190ms;
    --c6-duration-4: 220ms;
    --c6-duration-5: 250ms;

Macro Animations

Macro animations cover larger amounts of visual ground. This includes large panel or drawer reveals, movement across the screen, etc. These tend to be longer and more stylistic than micro animations, intended to add drama and mood setting.

    --c6-duration-6: 500ms;
    --c6-duration-7: 1000ms;
    --c6-duration-8: 2000ms;
    --c6-duration-9: 3000ms;
    --c6-duration-10: 5000ms;

Effect

Carbon uses a combination of easing and duration to create animation effects. Here are a few examples of how these guidelines can be combined. Hover on the cards to view the effects.