Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the maximum value of a CSS transition's duration?

What is the maximum value of duration in CSS transition-duration or transition-delay property? I can't find this information.

I found only that default value is 0s.

I used these documents:

  1. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
  2. https://drafts.csswg.org/css-transitions/
  3. https://www.w3.org/TR/css3-transitions/
  4. https://drafts.csswg.org/css-values-3/#time-value
like image 590
Lukas M. Avatar asked Oct 30 '22 01:10

Lukas M.


1 Answers

As Guruprasad J Rao mentioned, the longest transition-duration possible is the number of seconds contained within the largest integer possible, which happens to be 2147483647. If anybody is curious, a transition-duration of 2147483647s is 68.24 years (including leap years).

This sounds ridiculous, I agree. However, there actually are use cases for this. For example, in my own project, I ran into a problem where webkit didn't let me change the background color of their browser-implemented input autofill. Overriding via "!important" didn't work because browser-implement styles are impossible to override like that. So, to stop the webkit autofill from changing my input's colors, I just used transition: background-color 2147483647s. Problem solved.

like image 63
John Miller Avatar answered Nov 10 '22 18:11

John Miller