GELPPP alrighty so this is my code

.profile_avatar {
    animation: float 3s infinite;
}

@keyframes float {
    0% { transform: translateY(-0.5rem); }
    50% { transform: translateY(0rem); }
    100% { transform: translateY(-0.5rem); }
}

.profile_avatar selects only the avatar in my profile card, animation is the shorthand for the animation property and the float is the animation name, @keyframes float is for you to specify the keyframes of a certain animation, 0%, 50%, and 100% are the keyframes, and transform is what made it float

You can read up on the css animation property on w3schools, that can explain it better than I can