noShortTimeValues (CSS)
Summary
Section titled “Summary”- Rule available since:
v2.6.3 - Diagnostic Category:
lint/nursery/noShortTimeValues - This rule doesn’t have a fix.
- The default severity of this rule is information.
- Sources:
- Same as
time-min-milliseconds
- Same as
How to configure
Section titled “How to configure”{ "linter": { "rules": { "nursery": { "noShortTimeValues": "error" } } }}Description
Section titled “Description”Disallow animation and transition times that are shorter than a configured minimum.
An animation or transition that is too short is hard to see, and can look like flickering instead of smooth motion. A delay that is too short is hard to notice at all.
This rule checks the times in the transition-duration, transition-delay,
animation-duration, and animation-delay properties, and in the
transition and animation properties that combine them. It also checks
these properties when they have a browser prefix, such as
-webkit-transition.
Times of zero or less are allowed.
Each time is checked as it is written. The rule doesn’t work out the result
of a calculation, so calc(10ms * 20) is reported when minimum is 100.
In SCSS files, the rule also checks nested properties, such as
transition: { duration: 80ms; }.
This rule does nothing until the minimum option is set.
Examples
Section titled “Examples”Invalid
Section titled “Invalid”The following examples report a diagnostic when minimum is 100:
{ "linter": { "rules": { "nursery": { "noShortTimeValues": { "level": "on", "options": { "minimum": 100 } } } } }}a { transition-duration: 80ms; }code-block.css:1:26 lint/nursery/noShortTimeValues ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ This time is shorter than the configured minimum of 100ms.
> 1 │ a { transition-duration: 80ms; }
│ ^^^^
2 │
ℹ Times this short are hard to notice, and an animation or transition that is too short can look like flickering.
ℹ Use a time of at least 100ms.
ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
a { animation-delay: 0.01s; }code-block.css:1:22 lint/nursery/noShortTimeValues ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ This time is shorter than the configured minimum of 100ms.
> 1 │ a { animation-delay: 0.01s; }
│ ^^^^^
2 │
ℹ Times this short are hard to notice, and an animation or transition that is too short can look like flickering.
ℹ Use a time of at least 100ms.
ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
a { transition: background-color 6ms linear; }code-block.css:1:34 lint/nursery/noShortTimeValues ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ This time is shorter than the configured minimum of 100ms.
> 1 │ a { transition: background-color 6ms linear; }
│ ^^^
2 │
ℹ Times this short are hard to notice, and an animation or transition that is too short can look like flickering.
ℹ Use a time of at least 100ms.
ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
a { transition-duration: 0.8s; }a { animation-delay: 100ms; }a { transition: background-color 600ms linear; }a { animation: slide 8s, fade 0s; }Options
Section titled “Options”minimum
Section titled “minimum”Type: number
Default: none. The rule does nothing until this option is set.
The shortest time allowed, as a whole number of milliseconds. Times written in seconds are
converted before they are compared, so 0.1s is the same as 100ms.
{ "linter": { "rules": { "nursery": { "noShortTimeValues": { "level": "on", "options": { "minimum": 200 } } } } }}Invalid
Section titled “Invalid”a { animation: slide 150ms ease-in; }code-block.css:1:22 lint/nursery/noShortTimeValues ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ This time is shorter than the configured minimum of 200ms.
> 1 │ a { animation: slide 150ms ease-in; }
│ ^^^^^
2 │
ℹ Times this short are hard to notice, and an animation or transition that is too short can look like flickering.
ℹ Use a time of at least 200ms.
ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
a { animation: slide 0.2s ease-in; }Related links
Section titled “Related links”Sponsored by
Copyright (c) 2023-present Biome Developers and Contributors.