Poll: ¿Is animation-direction a good idea?

¿animation-direction?

Lets assume you have a CSS animation for background-color that goes from a shade of yellow (#cc0) to a shade of blue (#079) and repeats indefinitely. The code could be something like this:

@keyframes color {
  from { background: #cc0 }
  to { background: #079 }
}

div {
  animation: color 3s infinite;
}

If we linearize that animation, the progression over time goes like this (showing 3 iterations):

As you can see, the change from the end state to the beginning state of a new iteration is quite abrupt. You could change your keyframes to mitigate this, but there’s a better way. A property with the name animation-direction gives a degree of control on the direction of the iterations to smooth this out. It also reverses your timing functions, which makes it even smoother.

In early drafts, only the values normal and alternate were allowed. normal results in the behavior described above, whereas alternate flips every other iteration (the 2nd, the 4th, the 6th and so on), resulting in a progression like this (note how the 2nd iteration has been reversed):

The latest draft also adds two more values: reverse which reverses every iteration and alternate-reverse, which is the combination of both reverse and alternate. Here is a summary of what kind of progression these four values would create for the animation above:

The problem

I was excited to see that reverse and alternate-reverse were finally added to the spec, but something in the syntax just didn’t click. I initially thought the reason was that these four values essentially set 2 toggles:

  • ¿Reverse all iterations? yes/no
  • ¿Reverse even iterations? yes/no

so it’s pointless cognitive overhead to remember four distinct values. I proposed that they should be split in two keywords instead, which would even result to a simpler grammar too.

The proposal was well received by one of the co-editors of the animations spec (Sylvain Galineau), but there was a dilemma as to whether mixing normal with alternate or reverse would make it easier to learn or more confusing. This is a point where your opinion would be quite useful. Would you expect the following to work, or would you find them confusing?

  • animation-direction: normal alternate; /* Equivalent to animation-direction: alternate; */
  • animation-direction: alternate normal; /* Equivalent to animation-direction: alternate; */
  • animation-direction: normal reverse; /* Equivalent to animation-direction: reverse; */
  • animation-direction: reverse normal; /* Equivalent to animation-direction: reverse; */

A better (?) idea

At some point, in the middle of writing this blog post (I started it yesterday), while gazing at the graphic above, I had a lightbulb moment. ¡These values are not two toggles! All four of them control one thing: which iterations are reversed:

  • normal reverses no iterations
  • reverse reverses all iterations
  • alternate reverses even iterations
  • alternate-reverse reverses odd iterations

The reason it’s so confusing and it took me so long to realize myself, is that the mental model suggested by these keywords is detached from the end result, especially in the case of alternate-reverse. You have to realize that it works as if both alternate and reverse were applied in sequence, so reverse first reverses all iterations and then alternate reverses the even ones. Even iterations are reversed twice, and are therefore equivalent to the original direction. This leaves the odd ones as being reversed. It’s basically a double negative, making it hard to visualize and understand.

I thought that a property that would reflect this in a much more straightforward way, would be animation-reverse (or animation-iteration-reverse), accepting the following values:

  • none (equivalent to animation-direction: normal)
  • all (equivalent to animation-direction: reverse)
  • even (equivalent to animation-direction: alternate)
  • odd (equivalent to animation-direction: alternate-reverse)

Not only this communicates the end result much better, but it’s also more extensible. For example, if in the future it turns out that reversing every 3rd iteration is a common use case, it will be much easier to add expressions to it, similar to the ones :nth-child() accepts.

I knew before proposing it that it’s too late for such drastic backwards-incompatible changes in the Animations module, however I thought it’s so much better that it’s worth fighting for. After all, animation-direction isn’t really used that much in the wild.

Unfortunately, it seems that only me and Sylvain thought it’s better, and even he was reluctant to support the change, due to the backwards compatibility issues. So, I started wondering if it’s really as much better as I think. ¿What are your thoughts? ¿Would it make it simpler for you to understand and/or teach? Author feedback is immensely useful for standardization, so please, ¡voice your opinion! Even without justifying it if you don’t have the time or energy. Gathering opinions is incredibly useful.

TL;DR

  1. ¿Is alternate reverse and reverse alternate (either would be allowed) a better value for animation-direction over alternate-reverse?
  2. ¿If so, should redundant combinations of normal with alternate or reverse also be allowed, such as normal alternate?
  3. ¿Or maybe we should ditch it altogether and replace it with animation-reverse, accepting values of none, all, even, odd?

Side note: If you’re wondering about the flipped question and exclamation marks (¿¡) it’s because I believe they improve the usability of the language if widely adopted, so I’m doing my part for it ;) And no, I don’t speak Spanish.

  • Anonymous

    Having taught this stuff (HTML, CSS, etc) to beginners for a decade, I think your idea (none, all, even, odd) is so incredibly easier to explain, that this is a no brainer.

    And once again it seems to be proven that “experimental” (i e prefixed) properties aren’t.

    10 years from now, everybody who reads this blog post wil shake their heads in disbelief that your proposal was not adopted, for “backwards compatibility” reasons.

  • http://sunchaser.info/ Christian Archer

    I think  “none, all, even, odd” is the great idea

  • http://isaacandela.nl/ Isaac Andela

    What about a syntax where you specify the animation direction once for each iteration and the whole thing repeating itself? That would give maximum flexibility and it also seems quite intuitive to me.If the animation goes from 1 to 0 (and thus the reverse from 0-1)for:
    animation-direction: normal reverse normal;you’d get:1-0, 0-1, 1-0, 1-0, 0-1, 1-0 etc.for:animation-direction: normal normal reverse reverse; you’d get:1-0, 1-0, 0-1, 0-1, 1-0, 1-0, 0-1, 0-1, etc.

    • Anonymous

      I made a similar proposal in www-style. However, you can’t use values since you don’t know from which state you transition from.

      I proposed:

      animation-pattern: ab-ab;
      animation-pattern: ab-ba;
      animation-pattern: ba-ab;
      animation-pattern: ba-ba;

  • Greg Tyler

    Oh, it’s gotta be even/odd. I love it as a maths person and I love it because it’s less linguistic. Using words like reverse and alternate adds a grammatical layer, but “even” and “odd” are much more blunt and better defined: it’s 2n and 2n+1. Visually interpreting that is simple.
    Also, as someone who speaks English and Spanish, seeing the punctuation crossover was incredibly confusing at first. It’s a lovely idea, but the difficultly of typing them in Chrome on Windows means I sadly won’t be joining you!

    • http://floatboth.com MyFreeWeb

      ¿“type them in Chrome”? ¿A browser that’s built on standard frameworks/libraries can affect the native input system?

      • Greg Tyler

        I take that back. I had Num Lock off so, whilst I could type ALT+173 to get an inverted exclamation mark, Chrome would act on ALT+7 to take me to the home page, and off the one I was typing in. ¡Problem solved!

        Now I’ve just got to figure out how to login to Disqus.

  • Anonymous

    Your final suggestion is so right. I can’t believe it is that difficult to being into the fold. A poor design in the first place, if it can’t be extended. So much for the benefits of vendor prefixes.

    Also, the ¿¡ thing is really silly. ;) Unless you’ve just begun learning English, and even then, the grammatical structures which begin questions are easy to pick up on because they are almost always the same. To that point, the starters create non-essential visual clutter. Makes perfect sense on (figurative) paper, however.

    • http://leaverou.me Lea Verou

      Unless you’ve just begun learning English

      Absolutely, I began learning English like yesterday. Still struggling with the first half of the alphabet. ¡It’s so hard! ¿Does B come after A or the other way around? Oh wait, ¡K is between those two!

      • Anonymous

        Wellllll… I meant “Unless one has just begun” – the general “You.” :p

        • http://leaverou.me Lea Verou

          You’re thinking of small sentences, but the usability benefit increases linearly as the length of the sentence grows. For simple 1-4 word questions, yeah, it might not be very useful. Same for exclamation.

          But we’re way offtopic…

  • http://twitter.com/rolisz Szabo Roland

      “none, all, even, odd” is much better and more future-proof

  • http://twitter.com/jordanpittman Jordan Pittman

    ¡Simply put, the spec must be changed to allow this, regardless of circumstance! ¡With the addition of nth- expressions the possibilities would be endless!

  • Hugo Giraudel

    Hello !

    I personally think your proposition (none / all / even / odd) is easier to understand than the current way. I would love to see it officially used. :)

  • http://lensco.be/ Lensco

    Do you think “hmmm, I want to reverse every even iteration”? I’d wager most people just think “I want this animation to alternate”. Same with the other values. So in my opinion the current draft makes most sense.

    (The second scenario can be very confusing, with two keywords that may seem to contradict each other.)

    Also, the inverted question marks only add a lot of visual clutter. :)

  • http://daneden.me Dan Eden

    I’m completely sold on your first two points – it would make perfect sense to separate the ‘alternate’ and ‘reverse’ keywords in that way (¿who the heck came up with alternate-reverse? That’s just downright confusing) and it also makes sense to allow redundant combinations of ‘normal’ with ‘alternate’ since ‘normal’ is indicating a direction (direction in this case referring to 0%-100%, not alternating [0%-100%-0%]), but perhaps not ‘normal reverse’.

    Your third proposal made me raise my eyebrow a little. I think it would make more sense to keep ‘reverse’ within the scope of ‘animation-direction’ rather than give it its own property.

    • http://leaverou.me Lea Verou

      Hi Dan,

      I’m afraid you misunderstood my proposal. animation-reverse is not about separating reverse into its own property, it’s about replacing animation-direction in its entirety with another property, since basically all its values are about reversing all, none, even or odd iterations.

      • http://daneden.me Dan Eden

        Ah, right! My mistake. That was dumb.

        My gut says no – backward compatibility is of the utmost importance here. But a big part of me thinks it’s a great idea. It’s just about weighing up the compatibility issue; but in fairness, animation is working draft, so its subject to (albeit not always this drastic) change.

  • Anonymous

    My vote: animation-reverse: none, all, even, odd. It’s intuitively easiest to picture the process that’s going on. ie. no reversal, all reversed, every other iteration reversed starting with iteration 2, every other iteration reversed starting with the first  one.

    So in the gradient example above, choosing even or odd would give you the choice of starting out with either yellow or blue, but having an even gradient across multiple iterations either way. That’s what I would want to be able to do.

  • http://twitter.com/siteartUK Shane Murphy

    animation-reverse: none, all, even, odd gets my vote! I found it quite hard to understand the other syntax without your example images, but your new proposed method is easy to pick up on :)

    On a side note: I’m glad you explained the inverted question marks and exclamations… I thought I my tired eyes were playing tricks with me!

  • http://www.ifultech.com/About.aspx David Ross

    ¡English lessons indeed. 

  • http://twitter.com/rkrupinski Rafał Krupiński

    Limiting the options to reversing all, none or every second iteration does not sound future-proof. I’d like animation-reverse to accept more specific values: 2n, 3n, 7n+1 etc. For some reason we may want to reverse iterations in a more complicated manner, right?

  • Andrea Sciamanna

    I don’t want to add confusion, but I have a completely different conception of this property.

    To me animation-direction looks more like a gemoetrical vector.
    A vector has 4 properties.
     In this specific case, I think about two of them (I’ll try to translate the names from my language, as I don’t know if in English you use different words):
    direction: identified by the beam of straight lines, parallels to the straight line where is the vector (I see here the place for normal/alternate);
    orientation (??? in Italian would be “verso”): is described by the tip of the vector itself, represented by an orientated segment (I see here the place for nomal/reverse);

  • http://usabili.ru/ Елена Лунная

    First of all, i really think that two values for a property is twice harder to learn, twice harder to teach and twice harder to parse by css-engine. So your proposal of “alternate reverse” value is really bad.
    Second. The idea of values of normal, alternate, reverse, alternate-reverse is bad. Especially for non english speaking developers. Assume that you have property eg. “animation-direction” and when you code, you start think “oh… that might be something about directions”. Than you start to remember values “oh… there was _alternate_ value… what the goddamn it’s supposed to mean? alternate by what? may be alternate mean reverse directions? oh… there is _reverse_ value? okay, lets open the spec for searching that is this all about.”. This is so confusing.
    Third. Idea with animation-reverse is far better. It’s very good actually. But in my humble opinion it should be named as   “animation-direction-reverse”. And it should by design allow for expression like (2n+1) values. It is far better to remember for non english speaking users than “even” and “odd” values. Hope my comment helps.

  • Maryna Aleksandrova

    I vote for animation-reverse. 

  • http://twitter.com/aldo_mx Aldo Fregoso

    +1 for animation-reverse

  • http://twitter.com/codepo8 Christian Heilmann

    I like the proposal of even, odd and would even consider an nth() selector to be compatible with child selectors. It is technically a list of animations, so it makes sense to give you granular access to its parts. The backwards compatibility is not that much of an issue yet that it couldn’t be considered.

    Also, I don’t like the borrowing of Spanish punctuation in English, breaks my reading flow. We also don’t use the French «» although they look cool. We abused them for links in the past for that reason :)

    • http://leaverou.me Lea Verou

      We don’t use the French «» because we have an alternative that serves the same purpose, “”. We don’t have an alternative for indicating the beginning of a question or exclamation, which is incredibly useful for longer sentences.

      • http://twitter.com/domurtag domurtag

        Using syntactical constructs that are not supported by a language hinders readability. I don’t sprinkle closures around my Java code, just because I think they’re cool, and I feel the same way about your use of inverted question and exclamation marks in English text.

  • http://twitter.com/CyberSliver Jeffrey Ridout

    I’d have to vote for all, odd and even. But I’d rather see them as new values for animation-direction.
    animation-direction: [ normal | reverse-all | reverse-even | reverse-odd | reverse-nth() ]
    reverse-all being an alias for reverse, reverse-even for alternate, reverse-odd for alternate-reverse and reverse-nth() could be used for any positive integer value.
    This would allow animation-direction to be backward compatible by keeping the current values, yet more understandable by adding aliases.

  • http://bittersmann.de/ Gunnar Bittersmann

    Your mental model is not mine. I wouldn’t count the repetitions of an animations as even and odd. “alternate” and “reverse” are much more talkative value names to me.

    I kinda like the idea of splitting the one value into two, with “normal” expanding to “normal normal” (the latter also being valid; just as “center” expands to “center center” for ‘background-position‘).

    TL;DR: 1 tentative yes; 2 if so, yes; 3 no

    ⸘Reversed quotation and exclamation marks‽ Rather not.

  • http://twitter.com/tdavis0525 Terry Davis

    I think the ¿¡ thing is silly and I tried to put that in angle brackets, but they got consumed by some intervening layer of complexity. But text in angle brackets doesnt do much for the readability of the language either.

    As to animation, well I leave it to you to smooth out the edges of this stuff. Personally I think HTML5 needs a makeover, so I don’t bother commenting. It is better than what we had.

    But I’d prefer just to use XML — at least then it would be semantically consistent. Its the usual politics with markup, the 5 versus XHTML, recalling the IMG tag.

    I guess if I made a browser that used HTML I’d have another opinion. Maybe.

    • http://leaverou.me Lea Verou

      Huh? This post is about CSS, not HTML, XML or HTML5.

      • http://twitter.com/tdavis0525 Terry Davis

        I know :) I am tangental like that.

  • http://heliosstudio.ca/ Paul d’Aoust

    Funny, I think I’m the only one who vastly prefers the first/second syntax. Speaking of it in ‘even’ and ‘odd’ terms (option 3) confused me, because I don’t think of animation repeating in even and odd numbers. But I instantly grasped the two-argument example.

    The usage of ¡ and ¿ is something I’ve always envied the Spanish for. It appeals to my (X)HTML sensibilities — always have an opening tag and a closing tag around text with a certain kind of meaning — which I assume is why you like it too. It’s also nice because, if you’re reading out loud, you get a hint of how the sentence is supposed to sound.

    On Linux it’s even easier to type in these characters — ¡ is -!! and ¿ is -?? . Although I’ve switched the modifier key to because on my keyboard it’s labeled ‘AltCar’.

    And for some reason Disqus feels the need to close those ‘tags’. ¡Whatever!

  • http://twitter.com/RonnyOrbach Ronny Orbach

    I agree, animation-reverse sounds natural to me. Good proposal.

  • http://twitter.com/SelenIT2 SelenIT

    Personally I believe that thinking of ‘reverse’ and ‘alternate’ as ‘two toggles’ doesn’t simplify the mental model of animation cycle much. Having several combinations of two words with the same meaning can make confusion (personally I needed several minutes to get why ‘normal reverse’ means just ‘reverse’ and that it’s quite logical) and worsens the readability of the shorthand syntax.

    I like the idea of describing the animation timeline in terms of ‘even/odd cycle’ (point 3 in TL;DR). But the ‘animation-direction’ property has already been widely promoted and learned by people, and it’s name seems to be good (¡it’s about the direction of animation, after all!), so… ¿what about just adding ‘reverse-even’ and ‘reverse-odd’ values (as alias for ‘alternate’ and alias/replacement for ‘alternate-reverse’, respectively)? It won’t break (almost) any backwards compatibility and might be extended with something like ‘reverse-nth(3n)’ in the future (although I can’t imagine any realistic use case for such extension).

    And I’m not a fan of the idea of “¿¡” in general, but I agree that in some cases, when only a part of the very long sentence is a question/exclamation, this sort of punctuation can help to recognize these parts (e.g. in the 2nd sentence of the previous paragraph of this comment:).

  • Pingback: animation-direction - хорошая идея?

  • http://www.darklightdusk.nl Luuk Lamers

    I think the third point makes sence, though I think animation-reverse might be hard to understand to newbies. animation-reverse: all could hint at a reversing of all animations, which is not the case. Apart from the name it’s much more understandable than animation direction. Maybe animation-direction (normal/reverse) for direction and another property for alternating should be used, like animation-alternate (none/even/odd)