Stack Overflow
Stack Overflow

Questions tagged [html5-animation]

HTML5-ANIMATION is a way to animate HTML element with css or java script or both....

85 questions
4
votes
2 answers

Frame by frame animation in HTML5 with canvas

I have a flash animation I am trying to convert to HTML5. Now I have taken out all the images. For example in the hand animation, I have taken images of all hand images. I have made the canvas with the base drawing but I don't know how to replace…
Aayush
  • 3,079
  • 10
  • 49
  • 71
4
votes
2 answers

HTML5 Canvas animation uses 88-98% of CPU

i'm trying to animate a faux pixelated map of the world so that it transitions between different colors smoothly. i originially did this with jquery and tables but the cpu usage was very high so i thought i'd try html5 canvas instead. However, i…
gabereal
  • 304
  • 3
  • 11
4
votes
6 answers

HTML5 Canvas / Animation Resources

I run an ecard website and currently about half of the content is made up of animations made using Flash. Normally valentines is a pretty busy time for the site, but this year I found that while I had the same amount of traffic to the site, less…
user2077098
3
votes
2 answers

How to identify shapes in Canvas?

If I define a canvas and draw few shapes onto it, then how can I pinpoint each of the shape or image so as to declare events and other properties on the each shape. Consider I have a Rectangle and a triangle. SO can I have some mechanism so as to…
Shiv Kumar Ganesh
  • 3,799
  • 10
  • 46
  • 85
3
votes
3 answers

how to reverse animation in IMPACTJS

i am using ImpactJS to create a game on HTML5 and JS, when a animation is running, is it possble at any frame to reverse the animation frame flow (not flipping) ? I used rewind(), it only gets back to the first frame, is there any reverse()?
Niroop
  • 409
  • 1
  • 6
  • 13
3
votes
2 answers

Where are the authentic CSS3 Animation specs followed by WebKit and Mozilla?

Well I am looking for a complete definitive CSS3 Animation spec so that I am limited by those mentioned in tutorials for Dummies. Whenever I search the internet I only come across various tutorials and guides. I am looking for the authentic CSS3…
Raks
  • 1,723
  • 3
  • 18
  • 26
3
votes
2 answers

Is there a way to detect 3G and 2G connections speed on mobile phones and handheld devices?

Is there a way to detect 3G and 2G connections on mobile phones and handheld devices? Like If I want to deliver High-end Website when user is on 3G and Highly optimized version if user is on 2G.
Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852
3
votes
1 answer

css3 animations frame by frame

I need to do an animation frame-by-frame changing a background-position of an element. I need to do this WITHOUT easing or linear animation, just changing the background-position. Is it possible to achieve with css3 animation?
rizidoro
  • 13,073
  • 18
  • 59
  • 86
3
votes
1 answer

game performance of html5 canvas and pure Javascript/GWT

I want to write an animated game which needs a lot of animations running all the time, something like rolling the cards/images in slot machine. I am wondering if I should mainly use just pure GWT/Javascript to run the animation, or use HTML5 Canvas…
Joey
  • 2,732
  • 11
  • 43
  • 63
3
votes
1 answer

CSS3 Smooth transition when dynamically changing animations

I have two keyframe animations "Bounce-In" and "Bounce-Out" the Bounce-In animation takes 1.2 seconds to complete, but if a user triggers the Bounce-Out function before it's finished it will jump to 100% scale and doesn't gracefully scale out from…
bfritz
  • 2,416
  • 2
  • 20
  • 29
2
votes
2 answers

HTML5 Context/Canvas - when to call draw on the context

I'm writing a little object oriented style javasscript demo -- just to draw a bunch of balls moving around the screen. nothing fancy, no collision detection or anything at this point. Consider it safe to assume my Ball.js class is good. My question…
Marc H
  • 1,228
  • 3
  • 18
  • 29
2
votes
1 answer

SVG elements will not Animate when added dynamically

I have trying to achieve SVG element's animation while adding dynamic DOMs for its animation with jQuery. I generate DOMs with JS, so HTML page does not have any elements for this animation. When I add it dynamically, animation will not start in…
Chetan
  • 1,468
  • 1
  • 12
  • 15
2
votes
1 answer

Using WebGL 3D Shapes as 2D Canvas Images

I'm creating a 2D Canvas game with cubes raining down on players. Their goal is to shoot or dodge them. Right now the cubes are just 2D JavaScript OOP entities. What I want to do is replace the 2D cube graphics with WebGL 3D cubes. My question is,…
Ash Blue
  • 5,344
  • 5
  • 30
  • 36
2
votes
2 answers

Adding a CSS3 movement animation to HTML5 Video

I am trying to add a movement animation to a HTML5 video, but the result is very shaky and not smooth at all. The HTML is:
2
votes
2 answers

Turning frames into a video?

Is there a way, either through the HTML5 canvas/video APIs or a JavaScript library to take canvas images (exported through canvas.toDataURL or something similar) and stitch them together to make a video in the browser?
arjs
  • 2,835
  • 4
  • 22
  • 18
1
2
3 4 5 6