Efeito flutuante infinito com CSS

Com o código abaixo você consegue deixar um objeto flutuando infinitamente, apenas aplicando a class efeito-flutuante-infinito

@keyframes float{
	0%,100%{
		transform:translatey(0)
	}
	50%{
		transform:translatey(-30px)
	}
}
.efeito-flutuante-infinito {
     animation: float 2s ease-in-out infinite;
}

O código acima foi inspirado na publicação https://www.alanrezende.com.br/como-criar-uma-animacao-flutuante-em-css-e-utilizar-em-imagens-e-botoes-no-elementor/

Veja também: Caso queira apenas que o objeto flutue ao passar o mouse, você pode optar por este outro código: https://bruno.art.br/blog/efeito-flutuante-ao-passar-o-mouse-em-objeto-com-css/