CODEWITHSUNDEEP
javascriptcssanimation
Rubytastic
Rubytastic

Reputation: 15501

visually create css3 animations with timeline?

What techniques could be used to create this wonderful animation:

http://www.apple.com/iphone/

Is it Jquery with some CSS3?

Are there tools on OSX to visually create such an animation and then export it to Jquery and CSS?

Upvotes: 0

Views: 773

Answers (3)

Daniel
Daniel

Reputation: 1072

This is how it was made: http://johnbhall.com/iphone-4s/

The "phone stage" (blue-bordered box) contains all 6 "slides" of the animation sequence and has a transition css property with a duration and timing function (a cubic bezier curve). For the phone stage to cycle from one slide to the next, its css transform property is updated with new translate and rotate values. At the end of the cycle, the phone stage's transition duration is temporarily set to 0ms while slide 6 resets to slide 1.

Upvotes: 3

Alin P.
Alin P.

Reputation: 44346

From the looks of it there are just some CSS transforms (browser dependent syntax) and standard positioning timed with JS. Also there are some fades, but those are pretty easy to do nowadays. The shadows are just images, no fancy CSS for that.

As for the use of jQuery, they do not use that, but rather prototype with scriptaculous. Of course you could do it with jQuery just as easy, or any other mature framework for that matter.

Upvotes: 1

Tai Kahar
Tai Kahar

Reputation: 304

What i found with the Chrome extensions BuildWith and Chrome Sniffer.

  • HTML5
  • script.aculo.us 1.8.0
  • Prototype 1.7
  • Site Catalyst

Upvotes: 1

Related Questions