Is it possible to use a CSS sprite with in a IMG tag with @keyframe so I can have a nice gradual animated effect ?

CSS sprites only work with background images. You could perhaps try animating the background position. However I think you're are not understanding what a sprite is. You can't have a repeating pattern that is a sprite for example, which is what I think you are looking for based on your description of a granual animated effect. Also a repeating pattern wont work inside an IMG tag either, it must be a background image.

It's technically possible using overflow, but it defeats the whole point of using sprites. You will need to include an image for each instance it's used, and this means you will be requesting an image each time. It also makes it difficult to re-use, so I'd look at doing this with background images instead.