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:
Asked
Active
Viewed 2,687 times
8
-
1Since it is in `seconds`, there is no limit until the longest integer.. But more the number, it is waste to implement it.. :) – Guruprasad J Rao Jun 16 '16 at 13:56
-
@GuruprasadRao thanks for quick reply! – Lukas M. Jun 16 '16 at 13:58
-
Anytime.. Happy coding.. :) – Guruprasad J Rao Jun 16 '16 at 14:02
-
2BTW I interested in it because I need solution for this http://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete/29350537#29350537 and I can not use box-shadow because my inputs have transparent background. I have to preserve transparency. – Lukas M. Jun 16 '16 at 14:09
-
2@GuruprasadRao that would be milliseconds, so the time in seconds would be a factor 1000 less. Still a lot of seconds though... – Mr Lister Jun 16 '16 at 15:45
-
@MrLister Is it so? cos I see it be assigned as 1s 2s etc which basically means seconds!! Correct me if am wrong.. – Guruprasad J Rao Jun 16 '16 at 16:51
-
@Danix.. Couldn't get your requirement though, would be good if you add it as detailed ques or edit your OP.. – Guruprasad J Rao Jun 16 '16 at 16:53
-
2@GuruprasadRao See the OP's last link. Times can be expressed in `s` or `ms`. And when using `s`, you can specify fractions, like `1.5s`. – Mr Lister Jun 16 '16 at 16:57
-
Oh.. Alright.. :) That's pretty neat enough.. – Guruprasad J Rao Jun 16 '16 at 17:04
-
I don't know, but I just stumbled upon CSS support for scientific notation (`1e9s`) and it seems to be working in both Firefox and Chromium. – christianbundy Sep 29 '19 at 02:59
1 Answers
7
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.
John Miller
- 388
- 2
- 8
- 23