Animação CSS genérica para o movimento esquerdo-direita

Neste artigo, exploraremos a criação de uma animação CSS genérica para mover uma divisão para a esquerda e direita, atingindo as bordas de seu recipiente. Essa animação pode ser aplicada a qualquer div com posicionamento absoluto, independentemente de seu comprimento desconhecido. Isso ocorre porque, a 100%, a propriedade esquerda da Div ultrapassa a largura do contêiner, levando a um valor negativo e uma posição da tela. Isso nos permite mover a div em relação à sua posição atual, garantindo que não supere os limites do contêiner. 0% { Esquerda: 0; } 100% { Esquerda: 100%; Transform: translatex (-100%); } } #div1 { / * ... */ Animação: Destrasinistra 1s Linear Infinite Alternate; }

Neste código, o KeyFrame a 100% utiliza a esquerda e o transformado. A esquerda move a div para a borda direita, enquanto a transformação a traduz ainda mais à esquerda para compensar o superação. Essa combinação impede efetivamente a div.