Proposal for a "duration" meta-property(?) on a css class

Hello everyone.

I was thinking that it would be really useful if a css meta-property(?)(*)
existed that allowed one to set a specific duration (in milliseconds) that
a css class will be applied on an element. It would definitely simplify the
use of classes as a tool for immediate user feedback (e.g. toggle short
notification messages after certain actions).

An example use case can be seen here: https://jsfiddle.net/gtria80/hx2dph3j/
There is a button that can move a user to the next page of, let's say, a
form, and the button is disabled until the user selects at least 3 options.
When she does, the button is enabled and a short notification message
appears next to the button for 1 second.
An easy way to do this (one of many I guess) is to hide the message at
first (display:none or opacity:0 or visibility:hidden or ...), create a css
class that shows the message, add this class dynamically to the message
element whenever you want, and hide it again after a delay (that you'll
have to create programmatically).

However, if a "duration" meta-property existed that allowed one to say that
a class should be applied on an element for a certain period of time, the
javascript part that programmatically waits and removes this class after 1
second, could be dismissed. You would only have to add the class on the
element you want and it would be automatically removed after the designated
period of time.

An idea on how this could be specified would be to set this duration
meta-property in a way similar to the :nth-child selector, that is:

..visible:duration(1000) { display:inline; } or
..visible:dur(1000) { display:inline; } (as a shorter alternative)

....where 1000 is obviously in milliseconds ( = 1sec).
However, this is just an idea/suggestion on how such a feature could be
specified.

Has something similar been suggested/discussed before?
Eventually, do you think it would be a good idea? I really believe that it
would be useful in several occasions, especially in web apps.

Thanks in advance for your thoughts on that.
George Triantafyllakos

(*) I am using a question mark on the term meta-property since I am not
sure how such a feature should be named. It is not a really a css property,
neither a state, neither a selector. The meta-property term seems more
accurate and descriptive of the function of such a feature.

Received on Wednesday, 30 September 2015 13:29:30 UTC