Just give the actual image element class names. Just type in "fadeIn" as a class, and done. Then add "animated" as a class. Then give it another class name, I gave it superd (can also add "infinite if you want). You were in some way giving the animation classed to "responsive-picture" and not the div or the image element. I think responsive-picture is a class in the framework.
for the other part create and then add as a resource to the header a style sheet containing this:
-moz-animation-duration: 1s;
-moz-animation-delay: 1s;
-moz-animation-iteration-count: 4; }
That takes care of everything except the offset stuff. Will also have to add other vendor prefixes, the "-moz-" just takes care of firefox. I think it is suggessted for the prefixes, but all newer browsers should be getting standard.