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 347 comments ( View all | Add Comment )

yeieyey	1721917904 This is so cool bro Report Comment
GIBBERISH	1721844129 USING TYSM!1! Report Comment
St0rmieG1rll	1721739212 using!! Report Comment
# onyx	1721647308 tysm! using Report Comment
lev.	1721544785 Usingg Report Comment
Katyy	1721493860 Usingg! Report Comment
CathChicken	1721331633 using thank you! Report Comment
Umi˖°🎐 [wip]	1721312286 usinggg Report Comment
kari !!	1721301010 using Report Comment
Jrocky Camelot 22	1721049036 I'm usin' homie, this rocks! Report Comment I needs a small help, the GIF ain't workin' on blogs or bulletins by Jrocky Camelot 22; 1721077791; Report Try checking if it's animated on my blog or something by Jrocky Camelot 22; 1721077875; Report
.NET	1721020509 using. Report Comment
Atlaz o3o	1720969656 using ! Report Comment
Blehmin	1720845686 Usingg Report Comment
r4zor_ros4ry	1720799550 using! Report Comment
๑°N☆tsumi._Nakamura°๑	1720749346 Using (⁠◍⁠•⁠ᴗ⁠•⁠◍⁠) Report Comment
CORKE SCREW	1720712701 UR A GODSEND ^_^ Report Comment
decay ♡	1720682759 using <3 Report Comment
𝘉𝘭𝘪𝘵𝘻 ͙͘͡🍀	1720635263 Using Report Comment
pulpenik	1720612466 usiIngg! Report Comment
Ƹ̵̡Ӝ̵̨̄Ʒ●๋•yumeiko5491●๋•Ƹ̵̡Ӝ̵̨̄Ʒ	1720294319 USINGGG Report Comment