Empty divs used for nothing but styling were non-semantic and a bad idea before CSS animations and they are a bad idea now.

I stand by that. I feel like we've come a long way as an industry getting everyone on board with semantic markup. Do this, and reap the great rewards of speed, accessibility, maintainability, and SEO.

Then a new shiny thing comes along and the first thing we do is start abandoning our own rules. "Oooo I can make a bird fly across the screen‽" Order me up a few more of them empty divs! I'm surely guilty of this. It doesn't feel like that big of a deal when you're doing it, especially in moderation.

But CSS animations are here to stay. General best practices are going to emerge regarding what types of things we should be using them for, how much is too much, how to approach them semantically, how to offer fallback content, etc. I thought I'd throw in one little idea I had.

Let's consider what animations do for a design. They can give it mood. They can give it attitude. Like other aspects of design, they affect how a user might feel about that page. But they only do these things for sighted users. The empty div does none of these things for non-sighted users. It's just useless cruft.

<div class="moon">
//AN_Xml:  <!-- I offer nothing to non-sighted users -->
//AN_Xml:</div>

What if we were to take that empty div and try to accomplish for non-sighted users all the same things we are accomplishing for our sighted users. Simply putting descriptive text into those divs might be able to get it done for us. Similar to an alt tag for images, but actual inline content meant to be read/enjoyed in same way the animation is meant to be seen/enjoyed.

Perhaps our animation is of a moon rising, and as it rises the sky and ground turn to black. We need two elements to accomplish our animation, and so perhaps they contain the lyrics to CCR's Bad Moon Rising

<div class="moon">
//AN_Xml:   I see a bad moon rising
//AN_Xml:   I see trouble on the way
//AN_Xml:</div>
//AN_Xml:
//AN_Xml:<div class="ground">
//AN_Xml:   I see earthquakes and lightnin’
//AN_Xml:   I see bad times today
//AN_Xml:</div>

The CSS hides this text from view and calls the keyframe animation:

.ground, .moon {
//AN_Xml:   text-indent: -9999px;
//AN_Xml:   overflow: hidden; /* text-indent without this can cause choppy animation */
//AN_Xml:}
//AN_Xml:
//AN_Xml:.ground {
//AN_Xml:   -webkit-animation: ground-to-black 5s ease;
//AN_Xml:   -moz-animation:    ground-to-black 5s ease;
//AN_Xml:   -ms-animation:     ground-to-black 5s ease;
//AN_Xml:}
//AN_Xml:
//AN_Xml:.moon {
//AN_Xml:   -webkit-animation: rising-moon 5s ease;
//AN_Xml:   -moz-animation:    rising-moon 5s ease;
//AN_Xml:   -ms-animation:     rising-moon 5s ease;
//AN_Xml:}
//AN_Xml:
//AN_Xml:/* Plus various keyframe declarations */

View Demo

Notice the names of those keyframe animations. That's another discussion to have in the "semantic animations" vein. Another time.

This text could be anything that relates to the animation. It could describe the animation literally. It could be a poem that elicits the same emotion as the animation. It could be an <audio> element.

Woah there, fancy designer boy.

I don't use screen readers, so I don't get to make the call if this is a good idea or not. I imagine there is already enough cruft to fight through that this, despite the good intentions, might be just another thing obstacle on the way to "real content".

I suppose it's like everything else in this world: it depends.

Semantic Animation is a post from CSS-Tricks

Sounds like it does all the asset-requesting for you from the cloud, optimizes it, then sends you down one file that gets rendered into a website. Sounds clever to me, as long as it's secure as hell.

Rumor has it: WebKit based.

Direct Link to Article — Permalink

Amazon Silk is a post from CSS-Tricks

:first-child
//AN_Xml::last-child
//AN_Xml::nth-child
//AN_Xml::nth-last-child
//AN_Xml:
//AN_Xml::first-of-type
//AN_Xml::last-of-type
//AN_Xml::nth-of-type
//AN_Xml::nth-last-of-type
//AN_Xml:
//AN_Xml::only-child
//AN_Xml::only-of-type

We also get a couple of text-specific pseudo elements to help with our typography needs:

::first-letter
//AN_Xml:::first-line

That's a great start, but it really would be useful if we could extend the whole ":nth" concept to these typographic selectors. Let me convince you.

::nth-line() / ::last-line / ::nth-last-line()

We already have ::first-line, so to complete the set let's add ::nth-line(), ::last-line, and ::nth-last-line().

With these, we could select the first two lines of a poem to highlight.

article.poem p:first-child::nth-line(-n+2) {
//AN_Xml:  font-variant-caps: small-caps;
//AN_Xml:  color: red;
//AN_Xml:}

Or perhaps we could fade out the end of a passage.

article.poem p:last-child::nth-last-line(3) {
//AN_Xml:   color: hsla(26, 5%, 25%, 1);
//AN_Xml:   font-size: 70%;
//AN_Xml:}
//AN_Xml:article.poem p:last-child::nth-last-line(2) {
//AN_Xml:   color: hsla(26, 5%, 50%, 1);
//AN_Xml:   font-size: 60%;
//AN_Xml:}
//AN_Xml:article.poem p:last-child::nth-last-line(1) {
//AN_Xml:   color: hsla(26, 5%, 75%, 1);
//AN_Xml:   font-size: 50%
//AN_Xml:}

If we were allowed to use generated content on these line pseudo elements, we could accomplish something like line numbering without having to resort to intrusive markup.

pre::nth-line(n)::before {
//AN_Xml:  content: counter(line) ". ";
//AN_Xml:  color: #999;
//AN_Xml:}

Relevant article by Adam Prescott.

::nth-word() / ::first-word / ::last-word / ::nth-last-word()

We currently don't have any word-based pseudo elements. We do have word-spacing though, which is notable.

One use case is similar to using ::first-letter for drop caps, only doing a whole word.

article p::first-word {
//AN_Xml:  float: left;
//AN_Xml:  font-size: 300%;
//AN_Xml:  margin: 0 10px 10px 0;
//AN_Xml:}

Also similar to the "fade out" of lines above, we could fade out a passage word-by-word using ::nth-last-word(n).

::nth-letter() / ::last-letter() / ::nth-last-letter()

We already have ::first-letter, which sees pretty decent usage, so why not complete the set?

Of all of these "new" selectors, ::nth-letter is likely the most useful. For instance, Lettering.js wraps letters in <span>s for us so that we can select individual letters. This would be entirely unnecessary with ::nth-letter.

Take this example:

h1.fancy::nth-letter(n) {
//AN_Xml:  display: inline-block;
//AN_Xml:  padding: 20px 10px;
//AN_Xml:}
//AN_Xml:h1.fancy::nth-letter(odd) {
//AN_Xml:  transform: skewY(15deg);
//AN_Xml:  background: url(light-red-pattern.png);
//AN_Xml:}
//AN_Xml:h1.fancy::nth-letter(even) {
//AN_Xml:  transform: skewY(-15deg);
//AN_Xml:  background: url(dark-red-pattern.png);
//AN_Xml:}
//AN_Xml:h1.fancy::nth-word(n) {
//AN_Xml:  margin-right: 20px;
//AN_Xml:}
//AN_Xml:h1.fancy::last-word {
//AN_Xml:  margin-right: 0;
//AN_Xml:}

Check out all the examples at Lettering.js -- all of those are good examples of the need for this.

Another word/letter combination example is a formal "letter", like:

<p>Dear Emily,</p>
//AN_Xml:<p>yadda yadda yadda.</p>
//AN_Xml:<p>Love, Chris.</p>

Perhaps this "letter" is generated by dynamic content from a database, but we want to ensure the proper capitalization and style of the opening and closing lines.

.letter p:first-child::nth-word(-n+2)::nth-letter(1),
//AN_Xml:.letter p:last-child:nth-word(-n+2):nth-letter(1) {
//AN_Xml:  text-transform: uppercase;
//AN_Xml:}

The Complete Set

So if we get all of this, the complete set would be:

:first-child        :first-of-type        :only-child
//AN_Xml::last-child         :last-of-type         :only-of-type
//AN_Xml::nth-child          :nth-of-type
//AN_Xml::nth-last-child     :nth-last-of-type
//AN_Xml:
//AN_Xml:::first-letter      ::first-line          ::first-word
//AN_Xml:::last-letter       ::last-line           ::last-word
//AN_Xml:::nth-letter        ::nth-line            ::nth-word
//AN_Xml:::nth-last-letter   ::nth-last-line       ::nth-last-word 

Again, just wishful thinking. If there is anyone I can put this in front of that can do something about it, I will. And I'll also keep this updated with the feedback on it, positive or negative.

For the record, this isn't a new request. Anne van Kesteren called for it in 2003.

A Call for ::nth-everything is a post from CSS-Tricks