Using CSS attr() function and data-tags for animation timings

Question

I'm wondering wether I can combine data-tags with animations in CSS. I have a list of an undefined amount of items which are rendered by a javascript templating engine. As soon as the JS finished rendering them I would like to fade them in one after another without having to write a huge bunch of CSS selectors. This was my initial thought, when i only had about 6 elements been added dynamically. Due to the fact that it might get an undefined amount and should still look good I'm facing the described problem.

Is this possible? How do i need to write my CSS?

li.shown {
    -webkit-animation: animateIn .8s forwards;
    -moz-animation: animateIn .8s forwards;
    animation: animateIn .8s forwards;
    -webkit-transition-delay: 0;
    -moz-transition-delay: 0;
    transition-delay: 0;
    -webkit-transition-delay: attr(data-animation-offset ms);
    -moz-transition-delay: attr(data-animation-offset ms);
    transition-delay: attr(data-animation-offset ms);
}

My listitems might look like this and the data tag is calculated by js:

<li data-animation-offset="2000" class="shown"></li>

Ofcourse the easiest solution is using the good old style tag, but the coolest one might be the css version.

Thanks in advance

Celluloid

Sadly, I'm pretty sure that it's not possible. Wait for more answers though – Testaceous

Yeah...pretty sure you an only animate properties not attributes. – Lyall

In browsers that support the CSS attr() feature, this should work just fine. Those thinking otherwise should make sure they're familiar with the feature :) – Carbonaceous

That's what I thought.. How about the syntax? Newest Firefox and Chrome won't accept my current syntax at least on my pc – Celluloid

@Carbonaceous you should read my answer before making such rash statements. Not a single browser supports this feature, nor is there any work being done on it in any engine. – Emersen

@NielsKeurentjes "In browsers that support the CSS attr() feature" ... it's not my fault if that's currently an empty set :) – Carbonaceous

@Carbonaceous you're still wrong. All browsers currently support the CSS2.1 specification of attr, being that it can only be used for strings and no unit specification is allowed. No browsers support the CSS3 extensions that do allow one. – Emersen

still waiting.... – Appellate

Answer 1

Currently the attr() CSS function can not be used outside of the content property.

_MDN

Tactician

A source with all related browser issues linked here in the "Resources" tab: caniuse.com/#feat=css3-attr. Some of the issues were created 12 years ago! I have no hope it will ever be resolved. What a pity. – Robbegrillet

Answer 2

Yes and no. The current revision of the standards does allow this usage. It first states:

In CSS2.1 the ‘attr()’ expression always returns a string. In CSS3, the ‘attr()’ expression can return many different types. The ‘attr()’ expression cannot return everything, for example it cannot do counters, named strings, quotes, or keyword values such as ‘auto’, ‘nowrap’, or ‘baseline’. This is intentional, as the intent of the ‘attr()’ expression is not to make it possible to describe a presentational language's formatting using CSS, but to enable CSS to take semantic data into account.

The correct syntax is now:

attr( <attr-name> <type-or-unit>? [ , <fallback> ]? )

And then states:

The optional argument is a keyword drawn from the list below that tells the UA how to interpret the attribute value, and defines a type for the attr() expression. If omitted, ‘string’ is implied.

Further below, we read that ms is a valid type-or-unit value, detailing:

The attribute value must parse as a NUMBER CSS token, and is interpreted as a dimension with the specified unit. The default is ‘0’ in the relevant units, or else the property's minimum value if ‘0’ in the relevant units is not valid for the property. The default must also be used if the property in question only accepts values within a certain range (e.g. positive lengths or angles from 0 to 90deg) and the attribute is out of range (e.g. a negative length or 180deg). If the unit is a relative length, it must be computed to an absolute length.

Therefore, the syntax you provided is correct and valid according to this document. The Mozilla Developer Network documentation also confirms that this is valid usage. Going on to confirm at the bottom of the page that "Usage in other properties than content and with non-string values" is currently not supported in any browser. There's a CR for Gecko currently in 'NEW' status.

So yes, it is allowed. No, it doesn't work in any current browser nor will it do so anywhere soon.

It should also be noted that the current Candidate Recommendation for CSS3 explicitly begins with the following note:

The following features are at-risk and may be dropped during the CR period: ‘calc()’, ‘toggle()’, ‘attr()’.

It is therefore not guaranteed that this feature will remain in CSS level 3, and as such whether it will be implemented at all.

Emersen

Answer 3

With css alone i don't think it is possible, what you can do is like with jquery loop through your items and fade them.

Something like:

var timer=2000;
$('your li selector here').each(function(index){  
    setTimeout(function(){  
        $(this).fadeOut(200);  
    }, timer*index)  
});

Gaselier