Re: [css3-animation] why content property not animatable?

On Oct 8, 2014, at 10:35 AM, Tab Atkins Jr. <> wrote:

> On Thu, Oct 2, 2014 at 3:43 AM, Tim Larson <> wrote:
>> Background: I had the idea recently to implement a simple "busy spinner" using text. Cycling through a sequence like the characters U+25F0 through U+25F3, or even 0 through 9, seems like a good way to convey this idea. Using text eliminates the need for downloading an image, and this would also theoretically be possible in a console UA.
>> So after I'd whipped up the @keyframes declaration to try it out, I was surprised to notice that the content property is not animatable. Why is that? Of course, one could code it up in JS, but it would be so much simpler to do it declaratively, this ought to be a CSS solution.
>> I've been trying to find the answer to why some properties can be animated but others cannot. Perhaps some just wouldn't make sense, but this one does.
> Originally we only made properties animatable if they lived in a
> reasonable metric space - we needed some way to compute distance and
> represent intermediate values at all points of the animation.  This
> covers everything whose value is a number or number-like things (such
> as colors).
> We've planned for some time to allow all properties to be animatable,
> even when they don't have a metric.  Instead, they'd just switch from
> their start to end value halfway through the timing-function progress.
> This is still the plan of record, but nobody's tried out the
> implementation yet to see if there are any compat issues that we'd
> have to address.
What Tab said; we can't really 'animate' from any content property value to any other as in "Let's compute all the intermediate values to go smoothy from content:'foo' to content:'bar'". We can merely pick a consistent time at which one value replaces the other when you specify these in @keyframes. 

Yes, in some cases you want to go through a series of strings that could be interpolated e.g. because you just want to animate through a contiguous sequence of single-character things. That'd solve your problem, but is it something we can always assume any time the start/end values of the content property are single characters? If I want to turn bullets in a custom list control into checkmarks as part of an animation I probably do not want all the intermediate code points in between the bullet and the checkmark to show up in between. Or maybe I do want to animate through a small series of characters in an icon font but their values are in fact not contiguous.

So the challenge here is defining a default animation behavior that is generally useful for a wide subset of the values and use-cases people use the content property for. Iterating between Unicode code point value is not a good default. Though it'll be nice some of the time it'll likely be surprising and unwanted most of the time.   

Received on Wednesday, 8 October 2014 22:26:48 UTC