2

Possible Duplicate:
css3 transition animation on load?

I would like to animate the progress bar on the page load from 0% to say 60%.Please find my fiddle below. I tried with css transition property, Couldn't achieve it.

http://jsfiddle.net/meetravi/5zJPr/2/

I have already achieved it using Jquery. Please find the fiddle below. http://jsfiddle.net/meetravi/5zJPr/3/

I would like to know if it could be possible using CSS3 solution only? If Not CSS3 animation can't be possible on page load ? Could some one clearly explain why CSS forces to wait for an event in the page say hover or click for the animation to happen rather make it work on page load?

Thanks

Community
  • 1
  • 1
Ravi
  • 3,132
  • 5
  • 24
  • 35
  • The transition is event based, which means it's not working w/o any JS after page load. You need something like a `:hover` or something else, to make it work. I recommend using JS in this case. Maybe someone else can disconfirm this. – sascha Jul 09 '12 at 14:47
  • Thanks Sn0opy. Actually I want to achieve it without hover as per my requirement on the page load. – Ravi Jul 09 '12 at 14:53
  • What about completely using Javascript? Since you want it as fallback, you can also use it for every browser. – sascha Jul 09 '12 at 14:56
  • Thanks Sn0opy I achieved the same using Jquery. Please let me know we could achieve this only using CSS3 http://jsfiddle.net/meetravi/5zJPr/3/ – Ravi Jul 09 '12 at 15:02
  • Thanks for letting me know. Bram Vanroy – Ravi Jul 09 '12 at 15:16

2 Answers2

5

You can do it using a CSS3 animation, but careful – they're not widely supported. Here's an updated jsFiddle.

animation: width <duration> <easing>;

@keyframes width {
    from { width: 0%; }
    to   { width: 60%; }
}​
Ry-
  • 218,210
  • 55
  • 464
  • 476
0

Without JavaScript or jQuery, this is not possible.

A.M.K
  • 16,727
  • 4
  • 32
  • 64