## ¿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

- ¿Is
`alternate reverse`

and`reverse alternate`

(either would be allowed) a better value for`animation-direction`

over`alternate-reverse`

? - ¿If so, should redundant combinations of
`normal`

with`alternate`

or`reverse`

also be allowed, such as`normal alternate`

? - ¿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.

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

Pingback: Panda Desiigner Remix()

Pingback: bursa orospu()

Pingback: http://www.tradeonixbonuses.com/review()

Pingback: baby pushchairs()

Pingback: anabolic pills for sale()

Pingback: Facebook Live()

Pingback: check us out()

Pingback: frin()

Pingback: Ray Veremy()

Pingback: Term Life Insurance()

Pingback: www()

Pingback: hand carved furniture()

Pingback: Murat Güven Düsseldorf()

Pingback: Education()

Pingback: Matka()

Pingback: man with a van London()

Pingback: xmt85c4wx5ctwxw3tcerthve56()

Pingback: alcoholism effects()

Pingback: دانلود قسمت هشتم شهرزاد دوم()

Pingback: دانلود شهرزاد قسمت هشتم فصل دوم()

Pingback: دانلود شهرزاد قسمت دوازدهم فصل دوم()

Pingback: دانلود شهرزاد قسمت هفتم فصل دوم()

Pingback: دانلود قسمت دهم فصل دوم شهرزاد()

Pingback: دانلود قسمت ششم فصل دوم شهرزاد()

Pingback: دانلود قسمت هفدهم عاشقانه()

Pingback: دانلود قسمت سیزده عاشقانه()

Pingback: Elena Koshka()

Pingback: Jessie Volt()

Pingback: Marley Brinx()

Pingback: Bobbi Dylan()

Pingback: Kitty Catherine()

Pingback: دانلود قسمت هفتم فصل دوم شهرزاد()

Pingback: دانلود فصل دوم شهرزاد()

Pingback: Cherry Hilson()

Pingback: lesbian porn xxx()

Pingback: Free Stuff Worldwide()

Pingback: backhoe repairs()

Pingback: دانلود قسمت 12 عاشقانه()

Pingback: Hundeskove i Danmark()

Pingback: Loyola College for Sale()

Pingback: دانلود قسمت یازدهم شهرزاد دوم()

Pingback: دانلود قسمت سوم شهرزاد دوم()

Pingback: دانلود قسمت پنجم شهرزاد دوم()

Pingback: دانلود ققسمت 12 عاشقانه()

Pingback: دانلود قسمت سیزده عاشقانه()

Pingback: porno gratis()

Pingback: Hilario()

Pingback: porno()

Pingback: titleist 917 driver()

Pingback: videos porno()

Pingback: porno gratis()

Pingback: porno gratis()

Pingback: porno()

Pingback: porno()

Pingback: porno()

Pingback: porno()

Pingback: porno()

Pingback: porno gratis()

Pingback: porno()

Pingback: porno gratis()

Pingback: porno()

Pingback: پنجره ضد سرقت ایرانی()

Pingback: دانلود قسمت هفده عاشقانه()

Pingback: free auto transport quote()

Pingback: ساخت پنجره دو سه جداره()

Pingback: Facial Spa Services Pembroke Park()

Pingback: Facial Spa Services Dania Beach()

Pingback: Facial Spa Services Hillsboro Beach()

Pingback: Acne Facial Treatments Hollywood()

Pingback: Facial Spa Services Deerfield Beach()

Pingback: فروش توری()

Pingback: groin wrap support()

Pingback: دانلود موزیک()

Pingback: دانلود قسمت پنجم شهرزاد دوم()

Pingback: casino games 2017()

Pingback: slut()

Pingback: online hotel booking()

Pingback: St. Louis Photographers()

Pingback: kinesphere()

Pingback: buy zynga poker chips()

Pingback: jake burgess palo alto ca()

Pingback: دانلود قسمت هفتم شهرزاد()

Pingback: instant clash royale gems()

Pingback: Judi Poker Online()

Pingback: پنجره()

Pingback: پنجره دو سه جداره()

Pingback: suport lanseta()

Pingback: bitcoin investment coin-banks()

Pingback: coin-banks cryptocurrency()

Pingback: coin-banks bitcoin()

Pingback: bitcoin trading()

Pingback: bitcoin hft()

Pingback: golarka do tkanin philips()

Pingback: coin-banks exchange()

Pingback: coin-banks.com()

Pingback: Porn World()

Pingback: DraftKings DFS()

Pingback: mdansby()

Pingback: دانلود قسمت هشتم شهرزاد دوم()

Pingback: contact()

Pingback: vigra master ï¿½ bom()

Pingback: کول دانلول()

Pingback: vpm()

Pingback: titleist 917 driver()

Pingback: پنجره()

Pingback: unlimited clash royale gems()

Pingback: دانلود شهرزاد سیزده 13()

Pingback: دانلود شهرزاد قسمت سیزده 13()

Pingback: دانلود سریال شهرزاد قسمت 15 پانزده()

Pingback: دانلود سریال شهرزاد قسمت 15()

Pingback: signal102.cloud.rta.mi.th/home.php?mod=space&uid=2209208&do=profile&from=space()

Pingback: https://vk.com/wall335947775_2175()

Pingback: Social Media Marketing()

Pingback: دانلود شهرزاد قسمت 16()

Pingback: over at this website()

Pingback: Neomi()

Pingback: Long Island Roofing()

Pingback: water heater repair()

Pingback: 火锅()

Pingback: دانلود()

Pingback: دانلود سریال عالجناب اول()

Pingback: دانلود قسمت دوم عالیجناب()

Pingback: دانلودسریال عالیجناب قسمت دوم()

Pingback: دانلود عالیجناب اول 1()

Pingback: work from home()

Pingback: game()

Pingback: acesse o site()

Pingback: political polls()

Pingback: پنجره ضد سرقت المانی()

Pingback: قیمت پنجره دوجداره در ایران()

Pingback: http://urladda.com/5J67()

Pingback: wheel alignment and balancing()

Pingback: شرکت تولیدی پنجره دوجداره ایرانی()

Pingback: آموزش ساخت پنجره دوجداره()

Pingback: فروش توری()

Pingback: Tile and Grout Cleaning Killeen TX()

Pingback: stock market tips()

Pingback: mizuno jpx 850 australia()

Pingback: a cet adresse()

Pingback: free delivery codes()

Pingback: Limos Bus Vancouver BC()

Pingback: دانلود فیلم سریال ایرانی()

Pingback: sell home()

Pingback: buy home()

Pingback: دانلود فیلم با کیفیت()

Pingback: دانلود فیلم()

Pingback: دانلود فیلم()

Pingback: پنجره()

Pingback: درب()

Pingback: پنجره دوجداره()

Pingback: how to buy bitcoin()

Pingback: ключар()

Pingback: پنجره()

Pingback: دانلود()

Pingback: پنجره ضد سرقت()

Pingback: پنجره()

Pingback: پنجره دوجداره()

Pingback: پنجره دوجداره()

Pingback: https://profiles.wordpress.org/jorgedavidson/()

Pingback: پنجره()

Pingback: شرکت تولیدی پنجره دوجداره()

Pingback: پنجره دوجداره()

Pingback: مشاوره بازاریابی آنلاین()

Pingback: buy weed online in canada()

Pingback: google ch porn()

Pingback: SEO Leeds()

Pingback: drugs()

Pingback: Mitch McConnell()

Pingback: garden bridges california()

Pingback: seomarketing.HandigeStart.nl()

Pingback: these details()

Pingback: Our Limousine service Vancouver BC office()

Pingback: https://www.youtube.com/watch?v=Bld2NoB1hBI()

Pingback: https://kdp.amazon.com/community/profile.jspa?userID=1787498()

Pingback: stainless steel showerhead()

Pingback: ed sheeran don t()

Pingback: دانلود فیلم اکسیدان()

Pingback: دانلود()

Pingback: window price()

Pingback: buy jordans cheap()

Pingback: دانلود فیلم()

Pingback: download best()

Pingback: Seo Yakima()

Pingback: Bad Spiderman()

Pingback: google ch porn()

Pingback: click this link now()

Pingback: دانلود فیلم()

Pingback: Bad Spiderman()

Pingback: veja aqui()

Pingback: karaj()

Pingback: پنجره()

Pingback: قیمت پنجره دوجداره()

Pingback: garden bridges()

Pingback: Web Design()

Pingback: Learn Colors for Kids()

Pingback: silver touch()

Pingback: Isela()

Pingback: EVA TV()

Pingback: how to vlog()

Pingback: cool gifts()

Pingback: usi tech()

Pingback: site oficial()

Pingback: restauração auditiva()

Pingback: صيانة()

Pingback: gay porn()

Pingback: live sex cams()

Pingback: دانلود فیلم()

Pingback: bowl chips and()

Pingback: tools for()

Pingback: karaj()

Pingback: casinoswing.com()

Pingback: real money casinos()

Pingback: download()

Pingback: دانلود()

Pingback: upvc window()

Pingback: download()

Pingback: download movie()

Pingback: download()

Pingback: پنجره()

Pingback: دانلود()

Pingback: garden bridges east coast()

Pingback: garden bridges Los Angeles()

Pingback: top real estate themes wordpress()

Pingback: Bad Credit Remortgages()

Pingback: read now()

Pingback: Joshua()

Pingback: Watch movie for free()

Pingback: Judi Bola()

Pingback: Make Money Online Without a Website()

Pingback: creampie in my wifes best friends pussy()

Pingback: vape pen atomizers()

Pingback: watch illegal porn()

Pingback: blackhead removal tool()

Pingback: cheap jordans free shipping()

Pingback: buy illegal seo()

Pingback: Elvis Presley Wedding Singer()