Criar Efeito de Flutuar Infinito com CSS - Bruno Devx - BR Criativus

post #4990

Criar Efeito de Flutuar Infinito com CSS

Publicado em: 03/05/2024 / Atualizado em: 03/05/2024

Categorias: BlogCSS

Segue abaixo um código CSS simples para criar o efeito de flutuar infinito um objeto (neste exemplo, usamos a CLASS flutuar-infinito) de maneira pratica apenas usando a propriedade @keyframes do CSS:

/* Adicione a CLASS .flutuar-infinito no objeto que deseja aplicar o efeito */
.flutuar-infinito {
    animation: 2s flutuar-infinito infinite;
}


@keyframes flutuar-infinito {
    0% {
        transform: translateY(0px);
        transition: all linear .2s;
    }

    50% {
        transform: translateY(-10px);
        transition: all linear .2s;
    }

    100% {
        transform: translateY(0px);
        transition: all linear .2s;
    }
}

OBS: Adicione a CLASS .flutuar-infinito no objeto que deseja aplicar o efeito.

Publicações recomendadas:


Link Direto

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.

bruno.art.br/?p=4990

ID de Referência: 4990

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato