Uso errato di animazioni CSS3 o no?

Things changed over the last years and if we keep in mind this stuff is going to be used in many web/mobile games, is it really wrong to use divs this way nowadays?

^{[emphasis mine]}
Sì, usare le div semplicemente per produrre animazioni è l'approccio sbagliato. Non toglie nulla all'eleganza o alla bellezza dell'animazione, ma è semplicemente lo strumento sbagliato per il lavoro.

Lo scopo delle animazioni CSS è quello di fornire animazioni associate a uno stile particolare. Aggiungere un effetto di scorrimento o dissolvenza a un menu a discesa sarebbe un esempio in cui le animazioni CSS fanno parte di uno stile. Trucchi CSS utilizza le animazioni ovunque, ad esempio il colore del menu di intestazione cambia quando viene caricata la pagina. Questi effetti fanno parte dello stile della pagina e non sono legati al markup

L'esempio che hai creato è strongmente legato agli elementi nell'HTML e nessuno di questi è contenuto significativo (semanticamente trasparente). È preferibile archiviare l'animazione in un .gif non ciclico separato o SVG che può essere animato e stilizzato con CSS e amp; JavaScript.

What are the [effects] of wrong semantics with this animation for the [end user]?

Per un utente ipovedente, usare la semantica sbagliata significa che avranno un'esperienza confusa. Potrebbero dover navigare attraverso una serie di elementi privi di senso che esistono esclusivamente allo scopo di visualizzare un'animazione. In alternativa, possono saltare completamente l'animazione e non comprendere il contenuto che la fa riferimento.

Un <img> ha un attributo [alt] allo scopo di spiegare il suo contenuto nel contesto. Se stai utilizzando un gruppo di <div> s, dovresti essere sicuro di aggiungere [title] e [role="img"] attributi sul contenente <div> (meglio spiegato nel specifica ARIA ).

Per un utente avvistato, probabilmente non ci sarà alcun problema. Al di là dell'accessibilità non c'è davvero un problema con l'utilizzo delle animazioni CSS come modo per creare un'animazione autonoma. Non lo rende un buon strumento da usare. Come un'analogia, se hai bisogno di inchiodare due tavole insieme, puoi usare la maniglia di un cacciavite invece di un martello. Entrambi svolgeranno il lavoro in circostanze normali; tuttavia, uno strumento è ovviamente più adatto per l'uso con le unghie.

I giochi Web e mobile probabilmente utilizzeranno la tela. Permette di realizzare effetti visivi e animazioni molto più avanzati, con una migliore accelerazione hardware rispetto a <div/> s in movimento.

Mantieni <div/> s per, beh, le sezioni di testo, dove non ci sono altri elementi più appropriati (come <h1/> ). Ciò significa anche che per quelli <div/> s, devi usare le animazioni con moderazione, per migliorare l'interattività dell'utente, non per creare animazioni su larga scala.

Dipende da come verrà utilizzata l'animazione. Se è solo una semplice animazione senza interazione, va bene e non c'è niente di sbagliato in questo.

Probabilmente non sarà il tipico uso che le persone hanno per spostare queste cose in giro, ma ... funziona, no?

Accetto con mjfgates. La convenzione esiste per una ragione. Se ritieni che la ragione sia obsoleta, sentiti libero di sperimentare. Detto questo, esiste anche una convenzione per rendere più facile per gli altri leggere il tuo codice. Se rendi più difficile per il resto di noi capire come stai facendo ciò che stai facendo, allora

• ha una buona ragione,
• documentalo estremamente bene,
• non pubblicarlo pubblicamente,
• o non farlo affatto.