Cirrus

#Transition Duration

New
0.7.1

These are utility classes that specify the duration of transitions.

ClassStyles
u-duration-0
transition-duration: 0ms !important
u-duration-75
transition-duration: 75ms !important
u-duration-100
transition-duration: 100ms !important
u-duration-200
transition-duration: 200ms !important
u-duration-300
transition-duration: 300ms !important
u-duration-500
transition-duration: 500ms !important
u-duration-700
transition-duration: 700ms !important
u-duration-1000
transition-duration: 1000ms !important
Supported Pseudo-Variants
New
0.8.0
active
checked
dark
disabled
first-of-type
focus
focus-visible
focus-within
group-focus
group-hover
hover
landscape
last-of-type
light
portrait
reduce-motion
responsive
visited

See more pseudo-variants.

#Examples

Below is a demo of all utility classes that set a transition duration. The syntax follows the form of u-duration-[0|75|100|200|300|500|700|1000].

Hover over each button to see the difference in transition durations.
u-duration-0
u-duration-75
u-duration-100
u-duration-200
u-duration-300
u-duration-500
u-duration-700
u-duration-1000
<div class="u-duration-0..."></div>
<div class="u-duration-75..."></div>
<div class="u-duration-100 ..."></div>
<div class="u-duration-200 ..."></div>
<div class="u-duration-300 ..."></div>
<div class="u-duration-500 ..."></div>
<div class="u-duration-700 ..."></div>
<div class="u-duration-1000 ..."></div>

#Responsive

⚠ Note that the viewport variants are disabled in the default build of Cirrus. To enable, you must enable it yourself in _configs.scss and create a custom build or enable it in the config in your Sass project.

//_configs.scss
$config: (
    viewports: (
        flags.$TRANSITION-DURATION: true,
    )
) !default;

To use the viewport variant of a given class, you just need to suffix each class with a viewport selector. For example, if I only want u-duration-100 to be applied to some element for lg and above, then I would use the lg:u-duration-100 class.

<div class="lg:u-duration-100">
    <!-- ... -->
</div>

For more information, visit the Viewports documentation.

#Variants

The classes specified above are the default utility classes for different filters. You can add, change, or remove classes within the _config.scss file of Cirrus.

// _config.scss
$config: (
    extend: (
        transitions: (
            durations: (
                1500: 1500ms,
            )
        )
    )
) !default;

This would generate the following classes.

.u-duration-1500 {
    transition-duration: 1500ms !important;
}

Learn more about how to extend Cirrus to support your use cases in the Configuration documentation.