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?

Improve this question
2
  • 6
    On a side note, that is a nifty animation.
    – Shauna
    May 9, 2012 at 18:00
  • Thank you. The concept/idea belongs to this video: vimeo.com/41336551 I've just tried to made a part of it with CSS3 in Adobe Edge. So the glory belongs to the video creator.
    – René Stalder
    May 9, 2012 at 23:18

5 Answers 5

Reset to default
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.

Improve this answer
6
  • For me, this is the best answer. It's the exact explanation of what's wrong with my animation and how CSS3 Animations should be used exactly, with good examples. One thing I don't fully agree: Semantics. I think, as long things are accessible, usable in the most major browsers (or your target group) semantics shouldn't be primary. Look at all the frameworks using non semantic class or id names. Ok, people used tables for creating layouts, it's not nice but it worked. Maybe selfish, but what are the aftermath of wrong semantics with this animation for the enduser?
    – René Stalder
    May 10, 2012 at 21:49
  • Actually @René, classes and ids don't hold any semantics in HTML5, because they're never used by anyone other than the developer as hooks into the actual content; as such it's valid to take a class such as module and minify it to m.
    – zzzzBov
    May 10, 2012 at 22:13
  • From the HTML5 spec - "Particular meanings should not be derived from the value of the id attribute."
    – zzzzBov
    May 10, 2012 at 22:15
  • Thank you. That was a good, detailed description of what I wanted to read. Good examples. (and sorry for the mistakes in my texts)
    – René Stalder
    May 11, 2012 at 6:42
  • 2
    Just because Google does it, doesn't mean they've chosen the best tool for the job either. There are other ways of producing involved animations that are designed for the purpose of animation.
    – zzzzBov
    May 23, 2012 at 13:17
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.

Improve this answer
4
  • Good answer. So in fact, Adobe Edge does only have tools for creating divs and text. For that reason, thats the only thing you can animate with it. In reality of course you'll ever animate a html element such a div or a h1 with CSS3 animations. And it's possible to do more than just let a modal appear or a datarow disappear. And I think it's easier to use than canvas. What do you think, where is the limit we should switch from CSS3 Animations to HTML5/Canvas? Tutorials are full of stuff moving around divs and such things, so what is CSS3 Animation really for?
    – René Stalder
    May 9, 2012 at 20:57
  • 2
    @René - CSS3 animation on things like divs are primarily for more subtle effects that we used to use Flash or JavaScript for, such as a smooth color transition of text or background on mouseover, or a rotation of an image on select, etc. Full animations, including the one in your question, are generally better off in a Canvas. A good rule of thumb would be to ask "is this still usable/convey the same meaning without the animation?"
    – Shauna
    May 10, 2012 at 13:28
  • MainMa, Shauna, thanks a lot for your good answers. I marked zzzzBov answer as the best because it has more details about pro/cons and problems doing animations like mine. But your answer is also correct of course.
    – René Stalder
    May 11, 2012 at 6:40
  • @MainMa Look at Google's The Story Of Send. Take a look at the moving Mail icon. It is a moving div and in addition the image itself is animated by changing background-image position. google.com/green/storyofsend/desktop What do you think is wrong with my animation if you're looking at Google's example?
    – René Stalder
    May 23, 2012 at 10:25
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.

Improve this answer
1
  • 1
    Yes. The linked animation is a nice demo, a way to say "I know how to do CSS3 animation". It might be used as a decoration on a real web page. It is probably not the best way to implement a game, though.
    – 9000
    May 9, 2012 at 19:32
2

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

Improve this answer
4
  • 2
    Tables work for content layout, it doesn't mean they're considered right.
    – Shauna
    May 9, 2012 at 17:59
  • I like your answer because I think this should be the primary answer using things the wrong way. Also in real world. There are so many rules and we stuck in thinking out of the box because of these rules. And as long we have the knowledge of the consequences for the end user using stuff the wrong way we can do things "semantically" wrong. It's the same with the W3C validations. Microsoft has tons of errors, but their site work perfectly on all browsers. What Shauna have wrote is also correct but at the end it have to work. Doing it primarily "right" makes it easier.
    – René Stalder
    May 11, 2012 at 6:55
  • @Shauna Look at Google's The Story Of Send. Take a look at the moving Mail icon. It is a moving div and in addition the image itself is animated by changing background-image position. google.com/green/storyofsend/desktop What do you think is wrong with my animation if you're looking at Google's example?
    – René Stalder
    May 23, 2012 at 10:25
  • 1
    @René - I agree with zzzzBov. Just because Google's doing it, it doesn't mean it's right (I also take quite a bit of issue with they way Blogger's HTML is written, for example).
    – Shauna
    May 23, 2012 at 13:44
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.
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.