Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/all-animation/all-animation

All Animation.css is a set of nice and crazy css animations made with the purpose to bring life and interactions to your project. They are cross-browser animations which will give more emphases on your pages likes sliding controls and 3D efects...
https://github.com/all-animation/all-animation

all-animation animation animation-css animations css css-animations scss

Last synced: 3 months ago
JSON representation

All Animation.css is a set of nice and crazy css animations made with the purpose to bring life and interactions to your project. They are cross-browser animations which will give more emphases on your pages likes sliding controls and 3D efects...

Awesome Lists containing this project

README 

        
All Animation

=============



All Animation.css é um conjunto de animações CSS agradáveis e loucas feitas com o objetivo de trazer vida e interações ao seu projeto. São animações para todos os navegadores que darão mais ênfases em suas páginas, como os controles deslizantes e os efeitos 3D ...



[Você pode ver o site aqui - vamos mudar nosso layout em breve](http://clovisdasilvaneto.github.io/all-animation/)



## Traduções

- [English](README.md)



## V3 agora está pronto para ser usado!

Já está no NPM, mas ainda estamos melhorando nossa documentação e API.



Novos módulos também serão lançados no futuro, o primeiro será:



- [ ] all-animation/react 🥰🥰 



### Como usar:



É fácil de usar, vamos ver passo a passo:



### Etapa 1, instale a biblioteca como dependência



É bem direto:



```sh

npm install all-animation

```

or 

```sh

yarn add all-animation

```



### Etapa 2, vincule a biblioteca ao seu projeto:



Atualmente, existem maneiras de vincular toda a animação ao seu projeto:



** via SCSS importações: **



Em seu principal`scss` Arquivo do seu projeto, basta incluir o módulo de animação, como:



```scss

// main.scss

@import "../node_modules/all-animation/scss/main"

```

Depois disso, você deve estar pronto para usar nossa biblioteca.



**Carregando apenas animações específicas **



Caso você não queira ter todas as animações em seu pacote final, você pode importar a animação específica que deseja, juntamente com as dependências da Animação principal:



```scss

// Dependências principais de avaliação, como variáveis e mixins

@import "../node_modules/all-animation/scss/config/_config";



// A animação específica que você deseja usar

// neste caso "a-bomb"

@import "../node_modules/all-animation/scss/modules/bomb/bomb"

```



**Link diretamente via arquivo CSS **

Você também pode baixar o arquivo CSS e colocá-lo antes de fechar a tag``:



```html



```

> Também incluímos os mapas de origem, para que você possa ter uma melhor visibilidade de depuração durante o desenvolvimento



### Etapa 2, html:



```




Classe de gatilho, vá!



```



### Etapa 3, jQuery (você também pode usar JavaScript simples):



```js

$(".any-class").click(() =>{

 $("#animation").addClass("a-journal");

});

```



### Opcional



Se você deseja adicionar o efeito em algum momento especificado, basta colocar um cronômetro:



Exemplo, desencadeando uma animação em um determinado elemento após 2 segundos:



```js

setTimeout(() =>{

 $("#animation").addClass("a-journal");

}, 2000);

```



### Cuidados:



Se você deseja adicionar alguma animação em um elemento que tem outra animação, ou deseja reiniciar a animação anteriormente acionada, você deve remover a última animação e acionar a nova. Exemplo:



```js

 $("#animation").removeClass("a-journal").addClass("a-four-rock");

```



Temos várias aulas para animações:



### Especiais:



    

     
  • a-dance
    • 

     
  • a-journal
    • 

     
  • a-pulse
    • 

     
  • a-pulse-slow
    • 

     
  • a-jamp
    • 

     
  • a-four-rock
    • 




### Pulos:

    

     
  • a-enter-up-bounce 
    • 

     
  • a-enter-down-bounce
    • 

     
  • a-enter-right-bounce 
    • 

     
  • a-enter-left-bounce
    • 

     
  • a-scale-bounce
    • 

     
  • a-jump-bounce
    • 




### Perspectiva:

Para usar as animações de perspectiva, adicione um contêiner pai com uma aula `a-perspective`, como: 



```html



    

    
...




```



Algumas aulas para

    

     
  • a-three-flip-right
    • 

     
  • a-three-flip-up
    • 

     
  • a-three-flip-down
    • 

     
  • a-flip-left-bounce
    • 

     
  • a-rotate-flip
    • 

     
  • a-flip-right-bounce
    • 




### Entradas que somem:

    

     
  • a-flip-top
    • 

     
  • a-flip-left
    • 

     
  • a-flip-right
    • 

     
  • a-flip-bottom
    • 




### Girar:

    

     
  • a-rotate-flip-down
    • 

     
  • a-rotate-down-bounce
    • 

     
  • a-rotate-out
    • 




### Agrecivos:

    

     
  • a-flash-bang
    • 

     
  • a-bomb
    • 




### Jello

    

     
  • a-jello-horizontal
    • 

     
  • a-jello-vertical
    • 




### Vibrate

    

     
  • a-vibrate-low
    • 

     
  • a-vibrate-medium
    • 

     
  • a-vibrate-high
    • 




### Wobble

    

     
  • a-wobble-bottom
    • 

     
  • a-wobble-left
    • 

     
  • a-wobble-right
    • 

     
  • a-wobble-top
    • 











### Contribuidores:

Se você deseja contribuir para o nosso projeto, leia o arquivo: contributing.md 😊



#### Créditos:



Clóvis Neto