Animate your profile picture (works on profiles, blogs, and bulletins!)

Tags: animated, profile, picture, avatar, profile picture, blogs, bulletins, twilight

Description:

Tired of having lame, motionless avatars? Wish you could animate your avatar? Well, I have most of a solution for you! This only works on places you can put CSS in, so your posts and profiles only, basically.

Note that your profile picture should be square and 160x160 or greater.

It is possible to edit the CSS to not have this requirement, though! Thanks to Bela for pointing out how to make it easier with the background-size – just change it however you'd like, now. If you want my recommendation for how to ensure it stays properly fitted (do this twice, once for blogs & bulletins, once for profiles):

Upload your gif to https://ezgif.com/resize
Look at the width/height under the image. Whichever one has the bigger number, go down to the input fields and only fill that one in — the first time, you fill it in with 110, the second, fill it in with 160. (This only applies for the default layout, your layout may make the profile image bigger! Consult your local layout wizard for more info.)
You don't have to use the actual gif that gets outputted, just note down what it says the width and height are.
Change the numbers for whichever section you're on to match the numbers ezgif outputs.
With that, it should be perfectly fitted to your gif, and fitted to the default sizes!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Twilight Sparkle (https://layouts.spacehey.com/layout?id=1796) -->

<!-- REPLACE THE URL WITH YOUR UPLOADED GIF --> 
<style>
.profile-pic > img { display:none; }
.profile-pic:after { background-image: url("http://placekitten.com/g/160/160"); display: inline-block; content:"" }
.blog-entry .profile-pic:after, .bulletin .profile-pic:after { background-size: cover; width: 110px; height: 110px; } /* blogs, bulletins */
.general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px; } /* profile */ 
</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 151 comments ( View all | Add Comment )

Mothy/Mo!!\|\|climber's #20 fan!	1696276095 might use Report Comment
cringefail	1696270635 using :P Report Comment
captain	1696182900 ive been trying to figure out how to use this when i have a layout that alters my profile pic, is there a solution for this? i can copy-paste the code bit if needed Report Comment
Mark Twain!!	1695937650 Using!! Report Comment
Creek ^_−☆	1695837319 using :) Report Comment
GREEN GIRL ^__^	1695723080 using!! 38D Report Comment
scara 📷 ⋆｡	1695415550 using :3 Report Comment
ʚ☆ɞ SL1NG / M4RK3R	1695296072 uzing :3 Report Comment
TAVRYN ☆ JEREMY	1695100194 might use!!! i love gif pfps sm Report Comment
seira	1694633605 Using!! Report Comment
I ♡ tyun‼︎	1694370445 Using! Report Comment
_M0BY00NG1_	1694301435 using!!! Report Comment
! CHECK PROFILE !	1694060272 using! Report Comment
M0N0+C0CAIN3	1694051153 did it break(?^?) i used it before and it waz amazing but now im changing the gif and itz just not showing up:( Report Comment
Weeze	1694042532 Using!! Super cool!! Thx for making this!! Report Comment
Kilian!!!!	1693951046 USING1!!11 Report Comment
Amelia!1!1 ^_^	1693928365 Using! :D Report Comment
Teddy 💪	1693869669 Used and it’s super kewl ^ use if ur cool Report Comment