CDN: https://cdn.jsdelivr.net/gh/SanzioRaphael/Animatio.css@8affa72feb8ddce70aae866a3b275435160857f3/lib/animatio.min.css


Assista ao Vivo | Animatio.css

Documentação da Biblioteca animatio.css

A biblioteca animatio.css é uma coleção de 72 animações em CSS. Ela permite o controle da animação, duração, repetição e direção. A duração pode variar de 1 segundo até 20 segundos, e a repetição pode ser de 1x, 2x, 3x, 5x, 10x ou 20x. As opções de direção incluem reverse, normal, alternate reverse, alternate, both, backwards e forwards.

Como usar

Para aplicar uma animação em um elemento HTML, basta adicionar a classe correspondente com o prefixo anima-. Por exemplo, se você quiser aplicar a animação chamada "bounce", adicione a classe anima-bounce ao seu elemento HTML.

Duração

Se você quiser alterar a duração da animação, adicione a classe anima-duration- seguida do tempo em segundos. Por exemplo, se você quiser que a animação dure 2 segundos, adicione a classe anima-duration-2s ao seu elemento HTML.

Repetição

Se você quiser que a animação se repita, adicione a classe anima-repeat- seguida do número de vezes que você deseja que a animação se repita. Por exemplo, se você quiser que a animação seja repetida 5 vezes, adicione a classe anima-repeat-5 ao seu elemento HTML.

Direção

Para definir a direção da animação, adicione a classe anima-direction- seguida de uma das opções de direção disponíveis. Por exemplo, se você quiser que a animação seja executada em sentido normal, adicione a classe anima-direction-normal ao seu elemento HTML.

Personalização de Combos

Você também pode personalizar as animações para atender às suas necessidades específicas. Para fazer isso, basta usar o editor em tempo real disponível em nosso site, que permite que você escolha as classes desejadas e copie-as para o seu projeto.