{"id":13769017,"url":"https://github.com/all-animation/all-animation","last_synced_at":"2026-02-21T07:02:16.284Z","repository":{"id":13365110,"uuid":"16052726","full_name":"all-animation/all-animation","owner":"all-animation","description":"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...","archived":false,"fork":false,"pushed_at":"2023-03-06T13:21:05.000Z","size":12179,"stargazers_count":494,"open_issues_count":6,"forks_count":136,"subscribers_count":33,"default_branch":"master","last_synced_at":"2026-01-23T23:26:48.016Z","etag":null,"topics":["all-animation","animation","animation-css","animations","css","css-animations","scss"],"latest_commit_sha":null,"homepage":"https://all-animation.github.io","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/all-animation.png","metadata":{"files":{"readme":"README.br.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2014-01-19T19:36:52.000Z","updated_at":"2026-01-18T15:36:31.000Z","dependencies_parsed_at":"2023-10-20T16:41:11.252Z","dependency_job_id":null,"html_url":"https://github.com/all-animation/all-animation","commit_stats":{"total_commits":116,"total_committers":10,"mean_commits":11.6,"dds":"0.47413793103448276","last_synced_commit":"bce5abc3ff3a8339ed8cf3bea9fe7d2f5da248aa"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/all-animation/all-animation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/all-animation%2Fall-animation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/all-animation%2Fall-animation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/all-animation%2Fall-animation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/all-animation%2Fall-animation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/all-animation","download_url":"https://codeload.github.com/all-animation/all-animation/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/all-animation%2Fall-animation/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29675916,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T06:23:40.028Z","status":"ssl_error","status_checked_at":"2026-02-21T06:23:39.222Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["all-animation","animation","animation-css","animations","css","css-animations","scss"],"created_at":"2024-08-03T17:00:15.244Z","updated_at":"2026-02-21T07:02:16.262Z","avatar_url":"https://github.com/all-animation.png","language":"SCSS","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"All Animation\n=============\n\nAll 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 ...\n\n[Você pode ver o site aqui - vamos mudar nosso layout em breve](http://clovisdasilvaneto.github.io/all-animation/)\n\n## Traduções\n- [English](README.md)\n\n## V3 agora está pronto para ser usado!\nJá está no NPM, mas ainda estamos melhorando nossa documentação e API.\n\nNovos módulos também serão lançados no futuro, o primeiro será:\n\n- [ ] all-animation/react 🥰🥰 \n\n### Como usar:\n\nÉ fácil de usar, vamos ver passo a passo:\n\n### Etapa 1, instale a biblioteca como dependência\n\nÉ bem direto:\n\n```sh\nnpm install all-animation\n```\nor \n```sh\nyarn add all-animation\n```\n\n### Etapa 2, vincule a biblioteca ao seu projeto:\n\nAtualmente, existem maneiras de vincular toda a animação ao seu projeto:\n\n** via SCSS importações: **\n\nEm seu principal`scss` Arquivo do seu projeto, basta incluir o módulo de animação, como:\n\n```scss\n// main.scss\n@import \"../node_modules/all-animation/scss/main\"\n```\nDepois disso, você deve estar pronto para usar nossa biblioteca.\n\n**Carregando apenas animações específicas **\n\nCaso 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:\n\n```scss\n// Dependências principais de avaliação, como variáveis e mixins\n@import \"../node_modules/all-animation/scss/config/_config\";\n\n// A animação específica que você deseja usar\n// neste caso \"a-bomb\"\n@import \"../node_modules/all-animation/scss/modules/bomb/bomb\"\n```\n\n\n**Link diretamente via arquivo CSS **\nVocê também pode baixar o arquivo CSS e colocá-lo antes de fechar a tag`\u003c/head\u003e`:\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"node_modules/all-animaton/dist/all-animation.css\" /\u003e\n```\n\u003e Também incluímos os mapas de origem, para que você possa ter uma melhor visibilidade de depuração durante o desenvolvimento\n\n### Etapa 2, html:\n\n```\n\u003cdiv id=\"animation\"\u003e\u003c/div\u003e\n\n\u003cbutton class=\"anny-class\"\u003eClasse de gatilho, vá!\u003c/button\u003e\n\n```\n\n### Etapa 3, jQuery (você também pode usar JavaScript simples):\n\n```js\n$(\".any-class\").click(() =\u003e{\n $(\"#animation\").addClass(\"a-journal\");\n});\n```\n\n### Opcional\n\nSe você deseja adicionar o efeito em algum momento especificado, basta colocar um cronômetro:\n\nExemplo, desencadeando uma animação em um determinado elemento após 2 segundos:\n\n```js\nsetTimeout(() =\u003e{\n $(\"#animation\").addClass(\"a-journal\");\n}, 2000);\n```\n\n### Cuidados:\n\nSe 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:\n\n\n```js\n $(\"#animation\").removeClass(\"a-journal\").addClass(\"a-four-rock\");\n```\n\nTemos várias aulas para animações:\n\n### Especiais:\n\n\u003cul\u003e\n \u003cli\u003ea-dance\u003c/li\u003e\n \u003cli\u003ea-journal\u003c/li\u003e\n \u003cli\u003ea-pulse\u003c/li\u003e\n \u003cli\u003ea-pulse-slow\u003c/li\u003e\n \u003cli\u003ea-jamp\u003c/li\u003e\n \u003cli\u003ea-four-rock\u003c/li\u003e\n\u003c/ul\u003e\n\n### Pulos:\n\u003cul\u003e\n \u003cli\u003ea-enter-up-bounce \u003c/li\u003e\n \u003cli\u003ea-enter-down-bounce\u003c/li\u003e\n \u003cli\u003ea-enter-right-bounce \u003c/li\u003e\n \u003cli\u003ea-enter-left-bounce\u003c/li\u003e\n \u003cli\u003ea-scale-bounce\u003c/li\u003e\n \u003cli\u003ea-jump-bounce\u003c/li\u003e\n\u003c/ul\u003e\n\n### Perspectiva:\nPara usar as animações de perspectiva, adicione um contêiner pai com uma aula `a-perspective`, como: \n\n```html\n\u003cdiv class=\"a-perspective\"\u003e\n    \u003c!-- Your animated code here, like: --\u003e\n    \u003cdiv class=\"a-three-flip-up\"\u003e...\u003c/div\u003e\n\u003c/div\u003e\n```\n\nAlgumas aulas para\n\u003cul\u003e\n \u003cli\u003ea-three-flip-right\u003c/li\u003e\n \u003cli\u003ea-three-flip-up\u003c/li\u003e\n \u003cli\u003ea-three-flip-down\u003c/li\u003e\n \u003cli\u003ea-flip-left-bounce\u003c/li\u003e\n \u003cli\u003ea-rotate-flip\u003c/li\u003e\n \u003cli\u003ea-flip-right-bounce\u003c/li\u003e\n\u003c/ul\u003e\n\n### Entradas que somem:\n\u003cul\u003e\n \u003cli\u003ea-flip-top\u003c/li\u003e\n \u003cli\u003ea-flip-left\u003c/li\u003e\n \u003cli\u003ea-flip-right\u003c/li\u003e\n \u003cli\u003ea-flip-bottom\u003c/li\u003e\n\u003c/ul\u003e\n\n### Girar:\n\u003cul\u003e\n \u003cli\u003ea-rotate-flip-down\u003c/li\u003e\n \u003cli\u003ea-rotate-down-bounce\u003c/li\u003e\n \u003cli\u003ea-rotate-out\u003c/li\u003e\n\u003c/ul\u003e\n\n### Agrecivos:\n\u003cul\u003e\n \u003cli\u003ea-flash-bang\u003c/li\u003e\n \u003cli\u003ea-bomb\u003c/li\u003e\n\u003c/ul\u003e\n\n### Jello\n\u003cul\u003e\n \u003cli\u003ea-jello-horizontal\u003c/li\u003e\n \u003cli\u003ea-jello-vertical\u003c/li\u003e\n\u003c/ul\u003e\n\n### Vibrate\n\u003cul\u003e\n \u003cli\u003ea-vibrate-low\u003c/li\u003e\n \u003cli\u003ea-vibrate-medium\u003c/li\u003e\n \u003cli\u003ea-vibrate-high\u003c/li\u003e\n\u003c/ul\u003e\n\n### Wobble\n\u003cul\u003e\n \u003cli\u003ea-wobble-bottom\u003c/li\u003e\n \u003cli\u003ea-wobble-left\u003c/li\u003e\n \u003cli\u003ea-wobble-right\u003c/li\u003e\n \u003cli\u003ea-wobble-top\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n### Contribuidores:\nSe você deseja contribuir para o nosso projeto, leia o arquivo: \u003ca href=\"contributing.md\"\u003econtributing.md\u003c/a\u003e 😊\n\n#### Créditos:\n\n\u003ca href=\"http://clovisdasilvaneto.github.io\" target=\"_blank\"\u003eClóvis Neto\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fall-animation%2Fall-animation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fall-animation%2Fall-animation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fall-animation%2Fall-animation/lists"}