How would I make an image/gif float up and down? [closed]

For starters, we'll add the animation's keyframes—going up for half of your preferred duration, and then plopping back down, as such:

@keyframes float {
    0%   { transform: translate(0, 0px); }
    50%  { transform: translate(0, -8px); } /* decrease or increase as you wish, ofc, but don't let the numbers fool you; a negative on Y here = up */
    100% { transform: translate(0, 0px); }
}

All that's left now is actually applying that to your element's CSS, which - for simplicity's sake - we'll be doing here with animation: 2s linear 0s infinite float - 2s is the duration, linear defines how the animation progresses, 0s is how much of a delay we want before the animation actually begins, infinite keeps it going forever, and float's the name of the anim itself.

So that's the first half. The second half is; where do you want to apply this?

1. If you want it on a single image that you have added somewhere on the page, give that image an ID and then add the float accordingly (e.g. <img src="wherever.you/got-the-image-from.png" id="float"> followed by a #float declaration in your style with that linear, infinite animation from the first half).



2. If you want it on multiple images - well, same deal, just give those images a class instead of an ID (e.g. class="float" and .float).



3. Or, if you want it on a pre-existing image, such as your avatar for example's sake, declare it on .profile-pic (i.e. its container element).

To finish this off with a concrete, in-practice example in case any of this comes off as confusing, here's #1:

<img src="https://example.com/example.png" id="float">

(...)

<style>
@keyframes float {
    0%   { transform: translate(0, 0px); }
    50%  { transform: translate(0, -8px); }
    100% { transform: translate(0, 0px); }
}

#float { animation: 2s linear 0s infinite float }
</style>

Hope this is of some help. ^^