Log In

css animations for your profile! (free)

7 Dec 2016, 5:49 pm (Edited 22 Oct 2017, 3:37 pm)
hey all! ive been practicing with animations recently and decided to share some of my work! all animations are free to use, but please credit me on the profile <3 these animations affect various parts of the profiles, so please read carefully.

if you have any suggestions for future animations, please let me know! i will try to see what i can do.


Spinning & Shrinking Shield on Hover
example: screenshot (actual animation is smoother)
details: plays indefinitely when hovered over
code:
@keyframes spin { 0% { transform: rotate(0deg) scale(1, 1); } 30% { transform: rotate(360deg) scale(.2, .2); } 60% { transform: rotate(0deg) scale(1, 1); } 70% { transform: rotate(0deg) scale(1, 1); } 80% { transform: rotate(0deg) scale(1.2, 1.2); } 90% { transform: rotate(0deg) scale(1.2, 1.2); } 100% { transform: rotate(0deg) scale(1, 1); } } .village-shield img:hover { animation: spin ease-in-out 3s infinite; }

Bouncing Logo on Hover
example: screenshot (actual animation is smoother)
details: can be edited to be on hover, plays indefinitely
code:
@keyframes boing { 0% { transform: translate(0px, 0px); } 100% { transform: translate(0px, -10px); } } #logo:hover { animation: boing ease-in-out .8s infinite; animation-direction: alternate; }

Villager Icon Shake on Hover
example: screenshot (actual animation is smoother)
details: icon will shake twice on hover
code:
@keyframes shaker { 0% { transform: translate(0px, 0px); } 20% { transform: translate(10px, 0px); } 40% { transform: translate(-10px, 0px); } 60% { transform: translate(10px, 0px); } 80% { transform: translate(-10px, 0px); } 100% { transform: translate(0px, 0px); } } .villagers-list .villager-avatar:hover { animation: shaker .7s; animation-iteration-count: 1; }


7 Dec 2016, 11:05 pm
My goodness, these are so useful!
v699mva

╭━━━━━━~~~~━━━━━━━╮
17 | Her/She
Awkward | ISFP
+1 FV Time
DeviantArt | Toyhouse
Tumblr
Art Shop | Premades

╰━━━━━━~~~~━━━━━━━╯
7 Dec 2016, 11:06 pm
ChrisHartley glad ya think so! i hope to expand on them eventually :')
7 Dec 2016, 11:09 pm
Thank you so much for this! It's really nice of you to do this ^^
swallowed_by_darkness__by_sharurukan-d6c
7 Dec 2016, 11:11 pm
noll ooh, very useful, thank you!

And I love your forum signature! MP100 is one of my favorite anime (I'm actually cosplaying Mob at an upcoming con!)
hey im retro || 24 || she/they


tumblr_ohfn1oFMGI1vaq4yao3_100.gif
7 Dec 2016, 11:11 pm
Page_of_Hope no prob! c:
7 Dec 2016, 11:13 pm
noll ooh, very useful, thank you!

And I love your forum signature! MP100 is one of my favorite anime (I'm actually cosplaying Mob at an upcoming con!)

yeah ofc!

and thank you! i love mob too (good luck at the con omg!! youll look great im sure)
7 Dec 2016, 11:13 pm
noll this is a bit off topic but is your name green?
bfb3RDT.pngCall me Gem| She/her and Them/they| Sapphic1MtmN6G.png


UdXKo19.jpgWX2rzpt.png hPSL0H9.gif
7 Dec 2016, 11:17 pm
noll this is a bit off topic but is your name green?

it is! it means im a helper (someone who will answer players questions & help out a bit)
7 Dec 2016, 11:19 pm
noll sorry again but how did you become that? just wondering, sorry for going off topic.
bfb3RDT.pngCall me Gem| She/her and Them/they| Sapphic1MtmN6G.png


UdXKo19.jpgWX2rzpt.png hPSL0H9.gif
7 Dec 2016, 11:21 pm
shadowwolfgem i messaged admin deinmaar about it since i saw it was something i could do & i wanted to help out c:
7 Dec 2016, 11:23 pm
noll oooh, thank you and sorry again.
bfb3RDT.pngCall me Gem| She/her and Them/they| Sapphic1MtmN6G.png


UdXKo19.jpgWX2rzpt.png hPSL0H9.gif
7 Dec 2016, 11:25 pm
shadowwolfgem its fine!
7 Dec 2016, 11:47 pm
oooh thank you for these!! : o
MPZGLNY.gif
kae :: 16 :: isfp | beta tester
fv time +1
7 Dec 2016, 11:49 pm
kae no problem!! c:
5 Jan 2017, 5:41 pm
ohh these are amazing~ thanks for sharing!
|beta tester||Toyhouse|Lover of angst and memes| SUPER forgetful, if you think I've ignored you please ping me again! | Vista Credits
anigif_enhanced-21544-1455841011-2.gif
5 Jan 2017, 6:16 pm
Lost_On_The_Moon of course!
5 Jan 2017, 6:22 pm
Hmm I might wanna come back and grab one later~
MY ICON IS MY POKESONA, EMI. Designed by a RowanFyre
My Deviantart~

Please check my Emergency Commissions thread? I need to raise $15-$22 for a bab on hold
Clicky click?:
https://pokefarm.com/user/DSSOfficial
5 Jan 2017, 6:22 pm
oh wow :D really nice c: makes me want to learn this even more >w<



<3 Ily <3


5 Jan 2017, 6:34 pm
Pawnn thank you! i definitely encourage the learning ; )
5 Jan 2017, 6:44 pm
noll
if you need an example for the slide in one
http://www.furvilla.com/villager/135695
my villager atomic is using it (with credit of course)
|beta tester||Toyhouse|Lover of angst and memes| SUPER forgetful, if you think I've ignored you please ping me again! | Vista Credits
anigif_enhanced-21544-1455841011-2.gif
5 Jan 2017, 7:08 pm
Lost_On_The_Moon thank you!! c:
7 Feb 2017, 7:02 pm (Edited 7 Feb 2017, 7:02 pm)
noll said:
hey all! ive been practicing with animations recently and decided to share some of my work! all animations are free to use, but please credit me on the profile <3 these animations affect various parts of the profiles, so please read carefully.

if you have any suggestions for future animations, please let me know! i will try to see what i can do.


Spinning & Shrinking Shield on Hover
example: screenshot (actual animation is smoother)
details: plays indefinitely when hovered over
code:
@keyframes spin { 0% { transform: rotate(0deg) scale(1, 1); } 30% { transform: rotate(360deg) scale(.2, .2); } 60% { transform: rotate(0deg) scale(1, 1); } 70% { transform: rotate(0deg) scale(1, 1); } 80% { transform: rotate(0deg) scale(1.2, 1.2); } 90% { transform: rotate(0deg) scale(1.2, 1.2); } 100% { transform: rotate(0deg) scale(1, 1); } } .village-shield img:hover { animation: spin ease-in-out 3s infinite; }


Profile Content Slide In
example: atomic (Lost_On_The_Moon 's villager)
details: plays once when you open the page, also works on villager profile
code:
@keyframes slide { 0% { transform: translate(-2500px,0px) ; } 60% { transform: translate(30px,0px) ; } 80% { transform: translate(-10px,0px) ; } 100% { transform: translate(0px,0px) ; } } .left-column, .right-column { animation: slide ease-in-out 1.8s; animation-iteration-count: 1; animation-fill-mode: forwards; }

Profile Content Fade In
example: oliver's profile
details: plays once when you open the page, also works on user profile
code:
@keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } .left-column, .right-column { animation: fade ease-in 2s; animation-iteration-count: 1; }

Bouncing Logo
example: screenshot (actual animation is smoother)
details: can be edited to be on hover, plays indefinitely
code:
@keyframes boing { 0% { transform: translate(0px, 0px); } 100% { transform: translate(0px, -10px); } } #logo { animation: boing ease-in-out .8s infinite; animation-direction: alternate; }

Villager Icon Shake on Hover
example: screenshot (actual animation is smoother)
details: icon will shake twice on hover
code:
@keyframes shaker { 0% { transform: translate(0px, 0px); } 20% { transform: translate(10px, 0px); } 40% { transform: translate(-10px, 0px); } 60% { transform: translate(10px, 0px); } 80% { transform: translate(-10px, 0px); } 100% { transform: translate(0px, 0px); } } .villagers-list .villager-avatar:hover { animation: shaker .7s; animation-iteration-count: 1; }


so if I wanted the TEP shield I would do this?

@keyframes spin { 0% { transform: rotate(0deg) scale(1, 1); } 30% { transform: rotate(360deg) scale(.2, .2); } 60% { transform: rotate(0deg) scale(1, 1); } 70% { transform: rotate(0deg) scale(1, 1); } 80% { transform: rotate(0deg) scale(1.2, 1.2); } 90% { transform: rotate(0deg) scale(1.2, 1.2); } 100% { transform: rotate(0deg) scale(1, 1); } } .tigereyepeakvillage-shield img:hover { animation: spin ease-in-out 3s infinite; }
I don't bite
I swallow you whole

GheQ6jo.gif
7 Feb 2017, 7:13 pm
fuzzyfurball1 you dont need to edit anything i put in the post, it should work fine if you copy and paste it in. 
7 Feb 2017, 7:14 pm
noll said:
fuzzyfurball1 you dont need to edit anything i put in the post, it should work fine if you copy and paste it in. 



okay!
I don't bite
I swallow you whole

GheQ6jo.gif