• 0

HTML5 Div Animations


Question

Xerax

So, HTML5 is the new craze, right? But i havn't found any documentation on how to use it :/

All i need todo is learn how to make a div, in effect, fly from off page onto the middle over a period of time. Anybody know anything?

Link to post
Share on other sites

10 answers to this question

Recommended Posts

  • 0
JTaylor69

Thanks for the link.

I thought that HTML5 was going to be just for fancy effects and better video support, but I guess they've made some things easier.

I did not know about the <nav> </nav> etc. until just now.

Link to post
Share on other sites
  • 0
andrew_f

Yeah you need to be sure not to confuse the blanket term 'HTML5' with the HTML5 technology. There's also other W3C standards like SVG, CSS3 and then non-W3C things like WebGL and NativeClient that are broadly described as 'HTML5' - although I've always thought that 'the next web', 'web 3.0' or something would be better - if sickeningly cheesy.

But yes, animation is the responsibility of CSS3. You can read the concepts of the standard here: http://www.w3.org/TR/css3-animations/

Webkit's blog has a couple of good guides too:

http://www.webkit.org/blog/138/css-animation

http://wwww.webkit.org/blog/324/css-animation-2/

  • Like 2
Link to post
Share on other sites
  • 0
Xerax

Ahhh. Thanks, i assumed it was HTML5 after all the IE9 "html5" hype, with the animated sites. Thanks for the links and clearing it up for me. +1.

Link to post
Share on other sites
  • 0
winlonghorn

I'd second that, and in addition, the w3c schools docs are a pretty good starting point...

http://www.w3schools.com/css3/css3_animations.asp

I agree. Oh, here is a teaser for my upcoming weather app btw ;)

weatherornot.png

It uses css3, HTML5 Geolocation, and Bing Maps functionality. :)

Link to post
Share on other sites
  • 0
OuchOfDeath

Canvas is the "big" one when it comes to HTML5. It's what does all the fancy complex visuals you see in everything "HTML5". Not sure why nobody's mentioned it yet.

Most of the experiments on this site use HTML5's canvas, and of course javascript for the actual code.

http://www.chromeexperiments.com/

WebGL is also rendered on top of Canvas, as a btw.

EDIT: This you'll like as well. As an actual HTML5 demo(using CSS3 for the layout transitions I believe), here's an overview of all the new things in HTML5, as well as all the other "umbrella" terms that go under HTML5 like WebGL as mentioned.

https://mozillademos.org/demos/dashboard/demo.html

Link to post
Share on other sites
  • 0
The_Decryptor

He's not talking about <canvas> though, he's talking about animating a <div> (JQuery would provide for a more consistent experience than CSS3 Animations)

  • Like 1
Link to post
Share on other sites
This topic is now closed to further replies.
  • Recently Browsing   0 members

    No registered users viewing this page.