You seem to be asking more than one question.
It might be easier to assemble an animation strip in Photoshop, since it can take the image borders into account. You can generate output images in Illustrator, but trying to create the entire strip may either prove unwieldly, or impossible if you exceed the artboard/canvas limits.
Unless you work faster in Illustrator, it doesn't help make animation that much easier than in Photoshop. Using either program, you can separate the image into components that can be transformed individually.
As for wanting to do this with PNG, there are two formats—APNG and MNG—that do allow animation, and are seeing increased adoption by browsers. APNG has the advantage of looking like a single-frame PNG by non-capable viewers, and currently being more widely adopted.
As AndrewH mentioned, the SVG vector format allows for animation, although I'm not aware of any programs that actually assist with animating SVG. You currently have to add code to the SVG via text editor.
"but it is a very time consuming process."