Variable viraAnimationDurationsConst

viraAnimationDurations: CssVarDefinitions<{
    vira-extended-animation-duration: "1.2s";
    vira-interaction-animation-duration: "84ms";
    vira-pretty-animation-duration: "300ms";
}> = ...

CSS vars for animation or transition durations from Vira.

Type declaration

  • Readonlyvira-extended-animation-duration: "1.2s"

    A longer duration used to show a full animation. Use this sparingly; make sure to not block any user input with this animation.

  • Readonlyvira-interaction-animation-duration: "84ms"

    A short duration used for user interactions. This duration is very short to ensure snappy responses to user interactions.

    The default duration of 84ms gives us 5 frames on a 60Hz screen.

  • Readonlyvira-pretty-animation-duration: "300ms"

    A longer duration used to emphasize the animation without totally aggravating a user.

Settings

Member Visibility