5

Well, I started using some CSS3 animations a couple of days ago. After hardcoding I've started trying different tools like Adobe Edge Preview version.

I made a short animation to get the functionality of the tool http://things.eyemade.ch/css3edge/

After that someone at Twitter took a look at it and said that it is wrong using divs to paint things like these. But I'm not sure about that. 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?

René Stalder
  • 153

5 Answers5

9

Web and mobile games will probably use canvas. It allows to do much more advanced visual effects and animations, with better hardware acceleration compared to <div/>s moving around.

Keep <div/>s for, well, the sections of text, where there are no other, more appropriate elements (such as <h1/>). This also means that for those <div/>s, you must use the animations with moderation, to enhance user interactivity, not to create full-scale animations.

Arseni Mourzenko
  • 137,583
3

It depends on how the animation is going to be used. If it's just a simple animation with no interaction, this is fine and there is nothing wrong with it.

ialphan
  • 131
3

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]
Yes, using divs simply for the sake of producing animation is the wrong approach. It doesn't detract from the elegance or beauty of your animation, but it's simply the wrong tool for the job.

The purpose of CSS animations are to provide animations that are associated with a particular style. Adding a sliding or fade effect to a drop-down menu would be an example where CSS animations are part of a style. CSS-Tricks uses animations all over the place, such as the header menu color changes when the page loads. These effects are part of the style of the page, and are not tied-in to the markup

The example you created is strongly tied to the elements in the HTML, and none of it is meaningful content (semantically transparent). It would be better to store the animation in a separate non-looping .gif, or SVG which can be animated and styled with CSS & JavaScript.

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

For a visually impaired user, using the wrong semantics means that they will have a confusing experience. They may have to navigate through a number of nonsensical items that exist solely for the purpose of displaying an animation. Alternatively they may skip over the animation completely and not understand content that references it.

An <img> has an [alt] attribute for the purpose of explaining its content in context. If you're using a bunch of <div>s then you should be sure to add [title] and [role="img"] attributes on the containing <div> (best explained in the ARIA spec).

For a sighted user, there probably wont be any issue at all. Beyond accessibility there isn't really an issue with using CSS animations as a way create a stand-alone animation. It doesn't make it a good tool to use. As an analogy, if you need to nail two boards together, you can use the handle of a screwdriver instead of a hammer. Both will get the job done under normal circumstances; however, one tool is obviously better suited for use with nails.

zzzzBov
  • 5,844
  • 1
  • 29
  • 28
2

It probably won't be the typical use people have for moving these things around, but.. it works, doesn't it?

mjfgates
  • 2,064
  • 2
  • 13
  • 15
0

Agree with mjfgates. Convention exists for a reason. If you think the reason is outdated, feel free to experiment. That said, convention also exists to make it easier for others to read your code. If you're making it harder for the rest of us to understand how you're doing what you're doing, then either

  • have a very good reason,
  • document it extremely well,
  • don't release it to the public,
  • or don't do it at all.
mehulkar
  • 101