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

Answer 1

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

_MDN

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.