So the avatar profile images are displayed in an HTML div container tag, using an inline CSS style for the background-image attribute.
<div class="Userpic" style="background-image: url('https://steemitimages.com/u/stellabelle/avatar');"></div>
From this we know that to use an animated image for the CSS background-image attribute, as defined here https://www.w3schools.com/cssref/pr_background-image.asp should be totally fine. Examples on other pages on this topic, show it should just work with an animated image profile pic chosen.
The thing is browser support for animated background images varies.
You would need to make a properly animated gif as you have done and use it as your profile image URL. Really is should be as basic as that.
The thing is I suspect most modern browser versions prevent the animated image from being used as a background image. Safari is reported to have had historic issues with animated gifs in general anyway. Support for them will vary.
But there is technically nothing stopping it from working "as-is" based on the source code the profile image I can view in the client side browser dev tools.
PS, have I upset you? I dm'd you on steemit chat to no response, and noticed the witness unvoting. Id sure like to give my side of whatever story caused all that. :|