« Web, HTML, Tech Forum

Friends profile icons with movement

Posted by Ruwsiann

posted

Forum: Web, HTML, Tech

Well, I don't know if the code I have has any error or bug, before I used it and the icons moved, now only the emojis. If you would also do me the favor of commenting on the code or modifying it


< style >

.profile .friends .person img {

animation-name: example;

animation-iteration-count: infinite;

animation-duration: 1.2s;

}


@keyframes example {

0% {

transform:translate(0px,0.3px) rotate(0.3deg);

}

8% {

transform:translate(0px,0.5px) rotate(-0.5deg);

}


16% {

transform:translate(0px,1px) rotate(1deg);

}


24% {

transform:translate(0px,1.5px) rotate(-1.5deg);

}


32% {

transform:translate(0px,2px) rotate(2deg);

}


40% {

transform:translate(0px,2.5px) rotate(-2.5deg);

}


48% {

transform:translate(0px,3px) rotate(3deg);

}


56% {

transform:translate(0px,3.5px) rotate(-3.5deg);

}


64% {

transform:translate(0px,3px) rotate(3deg);

}


72% {

transform:translate(0px,2.5px) rotate(-2.5deg);

}


80% {

transform:translate(0px,2px) rotate(2deg);

}


88% {

transform:translate(0px,1.5px) rotate(-1.5deg);

}


96% {

transform:translate(0px,0.5px) rotate(0.5deg);

}


100% {

transform:translate(0px,0.3px) rotate(-0.3deg);

}

</ style >


Report Topic

1 Reply

Reply by Gluma

posted

I don't have any solutions unfortunately but I did use the code and it does work. The issue might be due to it conflicting with some other code you have, maybe? You could also try puttng the code in different areas (as long as it's in a <style> tag) to see if that makes any difference


Report Reply