W3C home > Mailing lists > Public > www-style@w3.org > September 2012

[css3 animations][css3 transitions] ambiguous or unclear shorthand grammar

From: Carine Bournez <carine@w3.org>
Date: Thu, 20 Sep 2012 10:22:30 -0400
To: www-style@w3.org
Message-ID: <20120920142230.GW28414@jay.w3.org>


This comment is about the animation shorthand in the CSS3 animations WD published in
April2012, but it can also apply to CSS3 transitions, since the grammar is similar.

All the animation-* properties allow several values, comma-separated, to refer to
different transitions. Let's say I have

ex { animation-direction: normal, reverse }
ex { animation-duration: 1s, 1s, 1s }
ex { animation-fill-mode: none, forwards }

The shorthand grammar says you can put the individual properties in the order you like, e.g.
ex { animation: normal, reverse 1s, 1s, 1s none, forwards }

But it seems to me that the intent of the spec is that the comma separates each animation,
so the correct thing to write would be:
ex { animation: normal 1s none, reverse 1s forwards, 1s }

Also there's surely an ambiguity since animation-name and animation-fill-mode both
allow "none" as a value. (maybe change one of those 2 names?)

My suggestion is to rewrite the grammar in the same style as background is written:
- rewrite all the animation-xyz properties e.g. for animation-fill-mode:

<animation-fill-mode> =  <anim-fill-mode> [, <anim-fill-mode> ]*

with <anim-fill-mode> = [ none | forwards | backwards | both ]

- describe the shorthand in terms of anim-xyz instead of animation-xyz:

[<anim-name> || <anim-duration> || <anim-timing-function> || <anim-delay> || <anim-iteration-count> || <anim-direction> || <anim-fill-mode>] [, [<anim-name> || <anim-duration> || <anim-timing-function> || <anim-delay> || <anim-iteration-count> || <anim-direction> || <anim-fill-mode>] ]* 

I hope that I've clearly described the issue.

Carine Bournez -+- W3C Europe
Received on Thursday, 20 September 2012 14:22:35 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:04 UTC