🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

Related tags

Animations css stylesheets animation css-animations
Overview

Animate.css

GitHub Version Github Star Github Fork License

If you need the old docs - v3.x.x and under - you can find it here.

Just-add-water CSS animation

Installation

Install with npm:

npm install animate.css --save

Install with yarn:

yarn add animate.css

Getting started

You can find the Animate.css documentation on the website.

Accessibility

Animate.css supports the prefers-reduced-motion media query so that users with motion sensitivity can opt out of animations. On supported platforms (currently all the majors browsers and OS), users can select "reduce motion" on their operating system preferences and it will turn off CSS transitions for them without any further work required.

Core team

Daniel Eden Elton Mesquita Waren Gonzaga
Daniel Eden Elton Mesquita Waren Gonzaga
Animate.css Creator Maintainer Core Contributor

License

Animate.css is licensed under the MIT license. https://opensource.org/licenses/MIT

Code of Conduct

This project and everyone participating in it is governed by the Contributor Covenant Code of Conduct. By participating, you are expected to uphold this code. Please report unacceptable behavior to [email protected].

Contributing

Pull requests are the way to go here. We only have two rules for submitting a pull request: match the naming convention (camelCase, categorised [fades, bounces, etc]) and let us see a demo of submitted animations in a pen. That last one is important.

Comments
  • Switch to Sass

    Switch to Sass

    I’m working through adding some Sass functionality to Animate.css and using it as the primary language going forward.

    We’ll use this PR to discuss development, potential features, and track progress.

    Wishlist item(s) I’d like to explore before merging to master:

    [ ] Config options for transformations[^1]

    [^1]: In other words, adding options for relative vs. absolute transformations (relative to the transformed element vs. fixed, absolute transformation values), and adding some sort of scale for absolute transformations (small, medium, large, extra large, etc.)

    feature request improvement 
    opened by daneden 35
  • It stoped working in latest Chrome and Firefox

    It stoped working in latest Chrome and Firefox

    This is a bit confusing, but even your website, when you click "Animate" stopped working for latest chrome and firefox.

    It does work in Edge, though. Any idea why?

    I noticed it in a project, that all animations stopped working, and decided to theck your own website. Pretty weird this is test with chrome ( I am clicking the button).

    GIF-ELEMENT

    opened by martinlombana 33
  • Feature/new demo site

    Feature/new demo site

    This PR restructure and implements a new layout for the demo website. You can see it live here.

    • [x] New layout by @daneden 🎉🎉🎉
    • [x] Merges the gh-pages branch with the current branch (dev), so everything can be automated
    • [x] Animation list is automatically generated directly from the animate.css file
    • [x] The Readme file was split for easy updates and gets compiled and injected in the template file (I've written a very simple static generator)
    • [x] The demo website now holds the whole library documentation
    • [x] The structure is easy to understand and maintain and there's just 1 dependency to make the maintenance easier
    • [x] The docs still need to be rewritten and I'll make a PR soon defining a few things I think are important
    • [x] Cross-browser testing

    Solves #837 .

    opened by eltonmesquita 27
  • Apologies, The Future, and More

    Apologies, The Future, and More

    Hi everyone,

    I just wanted to write a short post to say a few things. First of all, a great big thank you for all the support Animate.css has garnered here on GitHub! The project has come a long way.

    Next, an apology. The issues and pull requests for this repo have a tendency to build up – something I’m not proud of. However, open source is hard. Real hard. I do my best, and I hope that’s enough for you guys!

    Now, on to the exciting stuff – the future. I’ll soon be starting an internship at Dropbox, meaning what little time I do have to spend working on Animate.css is going to get cut even shorter. I apologise in advance for this. However, I plan to do some things differently.

    First of all, I want to set up Animate.css on GitHub Pages. By doing this, I can have the wonderful folks here on GitHub maintaining the promo page for me just as much as the code itself is maintained. Currently, http://daneden.me/animate is essentially a completely separate codebase – every time Animate.css on GitHub is updated, I have to go back into my server and manually update the files. This sucks, and I know it. Using GitHub pages will mean that custom builds can (theoretically) be assembled directly from the GitHub source. Woohoo! Less manual work, more automatic awesome.

    Now, I don’t even know where to start with the GitHub-based custom build stuff, so I’ll need your help. Yes, you. Whether that’s doing all the hard work for me, or just giving me some tips. I don’t really mind; I’m just letting you guys know my long-term plan.

    Second, I’ll be looking into getting some collaborators on board. If that’s you, let me know, and I’ll think about inviting you. Even just a second pair of hands to help with the issue management would be great.

    That’s just about it. Please let me know how you folks feel about these changes, and let’s keep making Animate.css the easiest way to add app-like animations to your websites and web apps.

    opened by daneden 22
  • [REQUEST]: SCSS version.

    [REQUEST]: SCSS version.

    Hi!

    We're using animate.css but our workflow is SCSS. We're going to convert it ourselves as it reduces human error using mixins for vendor prefixes and so on. Would be great if it was included and kept up to date as part of the official repo. Mind if I make a pull request with the SCSS version when completed?

    feature request 
    opened by davidnknight 21
  • Remove npm-shrinkwrap.json file

    Remove npm-shrinkwrap.json file

    Suggesting to remove the npm-shrinkwrap.json file for these reasons:

    1. The npm docs recommend it only for CLI tools. They discourage publishing the file for library authors. Also here:

    It shares a format with npm-shrinkwrap.json, which is essentially the same file, but allows publication. This is not recommended unless deploying a CLI tool or otherwise using the publication process for producing production packages.

    1. Fixes #938, install issue with Node v12
    opened by fitztrev 20
  • Update Website

    Update Website

    I'd like to keep the website as simple and straightforward as it currently is, but perhaps rewrite it to:

    • Make it easier to maintain as new features and animations are added
    • Provide more usage information upfront (as opposed to leading people to our now-gigantic readme)
    demo site 
    opened by daneden 20
  • Animate.css Builder Web Version

    Animate.css Builder Web Version

    Animate.css Builder Web Version

    • The Animate.css Builder updates automatically, just update form > select.

    The Root Code ( not test ), is updated with the new animations.

    Preview 1

    Preview 1

    Preview 2

    Preview 2

    demo site 
    opened by Igorxp5 20
  • How to activate animation when the content scrolls into view.

    How to activate animation when the content scrolls into view.

    I have a some content and images that animates with animate.css and the animation currently activates as the page loads.

    The problem I have is that the given content and images are placed off screen due to lots of content before it so by the time a user scrolls down to it, the animation has already finished.

    I was looking for ways either through CSS3 or jQuery to only activate the animation on the content when the viewer sees the this.

    If someone could point me in the right direction, it would be really helpful.

    opened by rakeshmali 19
  • The Hippocratic License is not appropriated to this library

    The Hippocratic License is not appropriated to this library

    Hi guys,

    I do hope you are well, I want to firstly say I do enjoy your project. I think its innovative and a brilliant application of the WAAPI. My issue is not with the program its more with your end user agreement.

    I particular wish to point out that having read such a lofty aspirational text this, has little legal weight in very few courts in the land. Albeit the principles are held to the UN statues these are not directly enforced in the member countries as they have their own legislature to enact such directives.

    I do not belittle the merits proposed in the Hippocratic Licence, all i wish to do is point out, that you have very little going to protect you in terms of copyright violations, intellectual property abuse, manipulation or distribution of your software. As creators of a brilliant program I feel that you have let your own Political view's interfere with, and compromise the integrity of your software. Potential harming you's more so directly than having any consequential affects elsewhere

    Implementing a more solid and watertight legal framework around your open-source package should provide you the adequate protections that you as owners of this project should be entitled to. Also allowing its users to respect the guidelines and principles set forth.

    I felt it incumbent to express my opinion on this matter and hope that you do see light and seek the appropriate counsel and measures to protect this project better.

    Kindest Regards

    opened by aFuzzyBear 17
  • patches

    patches

    This pull request fixes some issues with non-width-defined elements, and shortens the code. More patches to come, with explanations at the pen. The pen is: http://codepen.io/procodeing/pen/BNagZa/

    Also maybe some 3d animations coming soon...

    opened by procodeing 17
  • Custom Scroll Bar

    Custom Scroll Bar

    This scroll bar is perfect for the current theme than the default one. Moreover, this is a page with CSS so this increases the professionality of this page.

    opened by TYehan 0
  • Bump eslint from 7.32.0 to 8.30.0

    Bump eslint from 7.32.0 to 8.30.0

    Bumps eslint from 7.32.0 to 8.30.0.

    Release notes

    Sourced from eslint's releases.

    v8.30.0

    Features

    • 075ef2c feat: add suggestion for no-return-await (#16637) (Daniel Bartholomae)
    • 7190d98 feat: update globals (#16654) (Sébastien Règne)

    Bug Fixes

    • 1a327aa fix: Ensure flat config unignores work consistently like eslintrc (#16579) (Nicholas C. Zakas)
    • 9b8bb72 fix: autofix recursive functions in no-var (#16611) (Milos Djermanovic)

    Documentation

    • 6a8cd94 docs: Clarify Discord info in issue template config (#16663) (Nicholas C. Zakas)
    • ad44344 docs: CLI documentation standardization (#16563) (Ben Perlmutter)
    • 293573e docs: fix broken line numbers (#16606) (Sam Chen)
    • fa2c64b docs: use relative links for internal links (#16631) (Percy Ma)
    • 75276c9 docs: reorder options in no-unused-vars (#16625) (Milos Djermanovic)
    • 7276fe5 docs: Fix anchor in URL (#16628) (Karl Horky)
    • 6bef135 docs: don't apply layouts to html formatter example (#16591) (Tanuj Kanti)
    • dfc7ec1 docs: Formatters page updates (#16566) (Ben Perlmutter)
    • 8ba124c docs: update the prefer-const example (#16607) (Pavel)
    • e6cb05a docs: fix css leaking (#16603) (Sam Chen)

    Chores

    • f2c4737 chore: upgrade @​eslint/eslintrc@​1.4.0 (#16675) (Milos Djermanovic)
    • ba74253 chore: standardize npm script names per #14827 (#16315) (Patrick McElhaney)
    • 0d9af4c ci: fix npm v9 problem with file: (#16664) (Milos Djermanovic)
    • 90c9219 refactor: migrate off deprecated function-style rules in all tests (#16618) (Bryan Mishkin)

    v8.29.0

    Features

    • 49a07c5 feat: add allowParensAfterCommentPattern option to no-extra-parens (#16561) (Nitin Kumar)
    • e6a865d feat: prefer-named-capture-group add suggestions (#16544) (Josh Goldberg)
    • a91332b feat: In no-invalid-regexp validate flags also for non-literal patterns (#16583) (trosos)

    Documentation

    • 0311d81 docs: Configuring Plugins page intro, page tweaks, and rename (#16534) (Ben Perlmutter)
    • 57089b1 docs: add a property assignment example for camelcase rule (#16605) (Milos Djermanovic)
    • b6ab030 docs: add docs codeowners (#16601) (Strek)
    • 6380c87 docs: fix sitemap and feed (#16592) (Milos Djermanovic)
    • ade621d docs: perf debounce the search query (#16586) (Shanmughapriyan S)
    • fbcf3ab docs: fix searchbar clear button (#16585) (Shanmughapriyan S)
    • f894035 docs: HTTPS link to yeoman.io (#16582) (Christian Oliff)
    • de12b26 docs: Update configuration file pages (#16509) (Ben Perlmutter)
    • 1ae9f20 docs: update correct code examples for no-extra-parens rule (#16560) (Nitin Kumar)

    Chores

    • 7628403 chore: add discord channel link (#16590) (Amaresh S M)
    • f5808cb chore: fix rule doc headers check (#16564) (Milos Djermanovic)

    v8.28.0

    Features

    ... (truncated)

    Changelog

    Sourced from eslint's changelog.

    v8.30.0 - December 16, 2022

    • f2c4737 chore: upgrade @​eslint/eslintrc@​1.4.0 (#16675) (Milos Djermanovic)
    • 1a327aa fix: Ensure flat config unignores work consistently like eslintrc (#16579) (Nicholas C. Zakas)
    • 075ef2c feat: add suggestion for no-return-await (#16637) (Daniel Bartholomae)
    • ba74253 chore: standardize npm script names per #14827 (#16315) (Patrick McElhaney)
    • 6a8cd94 docs: Clarify Discord info in issue template config (#16663) (Nicholas C. Zakas)
    • 0d9af4c ci: fix npm v9 problem with file: (#16664) (Milos Djermanovic)
    • 7190d98 feat: update globals (#16654) (Sébastien Règne)
    • ad44344 docs: CLI documentation standardization (#16563) (Ben Perlmutter)
    • 90c9219 refactor: migrate off deprecated function-style rules in all tests (#16618) (Bryan Mishkin)
    • 9b8bb72 fix: autofix recursive functions in no-var (#16611) (Milos Djermanovic)
    • 293573e docs: fix broken line numbers (#16606) (Sam Chen)
    • fa2c64b docs: use relative links for internal links (#16631) (Percy Ma)
    • 75276c9 docs: reorder options in no-unused-vars (#16625) (Milos Djermanovic)
    • 7276fe5 docs: Fix anchor in URL (#16628) (Karl Horky)
    • 6bef135 docs: don't apply layouts to html formatter example (#16591) (Tanuj Kanti)
    • dfc7ec1 docs: Formatters page updates (#16566) (Ben Perlmutter)
    • 8ba124c docs: update the prefer-const example (#16607) (Pavel)
    • e6cb05a docs: fix css leaking (#16603) (Sam Chen)

    v8.29.0 - December 2, 2022

    • 0311d81 docs: Configuring Plugins page intro, page tweaks, and rename (#16534) (Ben Perlmutter)
    • 57089b1 docs: add a property assignment example for camelcase rule (#16605) (Milos Djermanovic)
    • b6ab030 docs: add docs codeowners (#16601) (Strek)
    • 7628403 chore: add discord channel link (#16590) (Amaresh S M)
    • 49a07c5 feat: add allowParensAfterCommentPattern option to no-extra-parens (#16561) (Nitin Kumar)
    • 6380c87 docs: fix sitemap and feed (#16592) (Milos Djermanovic)
    • e6a865d feat: prefer-named-capture-group add suggestions (#16544) (Josh Goldberg)
    • ade621d docs: perf debounce the search query (#16586) (Shanmughapriyan S)
    • a91332b feat: In no-invalid-regexp validate flags also for non-literal patterns (#16583) (trosos)
    • fbcf3ab docs: fix searchbar clear button (#16585) (Shanmughapriyan S)
    • f894035 docs: HTTPS link to yeoman.io (#16582) (Christian Oliff)
    • de12b26 docs: Update configuration file pages (#16509) (Ben Perlmutter)
    • f5808cb chore: fix rule doc headers check (#16564) (Milos Djermanovic)
    • 1ae9f20 docs: update correct code examples for no-extra-parens rule (#16560) (Nitin Kumar)

    v8.28.0 - November 18, 2022

    • 34c05a7 docs: Language Options page intro and tweaks (#16511) (Ben Perlmutter)
    • 3e66387 docs: add intro and edit ignoring files page (#16510) (Ben Perlmutter)
    • 436f712 docs: fix Header UI inconsistency (#16464) (Tanuj Kanti)
    • f743816 docs: switch to wrench emoji for auto-fixable rules (#16545) (Bryan Mishkin)
    • bc0547e docs: improve styles for versions and languages page (#16553) (Nitin Kumar)
    • 6070f58 docs: clarify esquery issue workaround (#16556) (Milos Djermanovic)
    • b48e4f8 docs: Command Line Interface intro and tweaks (#16535) (Ben Perlmutter)
    • b92b30f docs: Add Rules page intro and content tweaks (#16523) (Ben Perlmutter)
    • 1769b42 docs: Integrations page introduction (#16548) (Ben Perlmutter)
    • 63bce44 feat: add ignoreClassFieldInitialValues option to no-magic-numbers (#16539) (Milos Djermanovic)

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 0
  • Bump postcss-import from 14.0.2 to 15.1.0

    Bump postcss-import from 14.0.2 to 15.1.0

    Bumps postcss-import from 14.0.2 to 15.1.0.

    Changelog

    Sourced from postcss-import's changelog.

    15.1.0 / 2022-12-07

    • Add data: URL support (this is not useful for most consumers) (#515)

    15.0.1 / 2022-12-01

    • Preserve layer in ignored @imports (#510, #511)
    • Join media queries in the correct order (#512, #513)

    15.0.0 / 2022-08-30

    • BREAKING: Require Node.js v14+ (#497)
    • BREAKING: Require nameLayer option for handling anonymous layers (#496)
    • Fix handling of @media queries inside layered imports (#495, #496)

    14.1.0 / 2022-03-22

    • Add @layer support (#483)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 0
  • Bump lint-staged from 11.2.6 to 13.1.0

    Bump lint-staged from 11.2.6 to 13.1.0

    Bumps lint-staged from 11.2.6 to 13.1.0.

    Release notes

    Sourced from lint-staged's releases.

    v13.1.0

    13.1.0 (2022-12-04)

    Features

    • expose cli entrance from "lint-staged/bin" (#1237) (eabf1d2)

    v13.0.4

    13.0.4 (2022-11-25)

    Bug Fixes

    • deps: update all dependencies (336f3b5)
    • deps: update all dependencies (ec995e5)

    v13.0.3

    13.0.3 (2022-06-24)

    Bug Fixes

    • correctly handle git stash when using MSYS2 (#1178) (0d627a5)

    v13.0.2

    13.0.2 (2022-06-16)

    Bug Fixes

    • use new --diff and --diff-filter options when checking task modifications (1a5a66a)

    v13.0.1

    13.0.1 (2022-06-08)

    Bug Fixes

    • correct spelling of "0 files" (f27f1d4)
    • suppress error from process.kill when killing tasks on failure (f2c6bdd)
    • deps: update pidtree@^0.6.0 to fix screen size error in WSL (1a77e42)
    • ignore "No matching pid found" error (cb8a432)
    • prevent possible race condition when killing tasks on failure (bc92aff)

    Performance Improvements

    • use EventsEmitter instead of setInterval for killing tasks on failure (c508b46)

    ... (truncated)

    Commits
    • eabf1d2 feat: expose cli entrance from "lint-staged/bin" (#1237)
    • a987e6a docs: add note about multiple configs files to README
    • c4fb7b8 docs: add note about git hook TTY to README
    • e2bfce1 test: remove Windows snapshot workaround
    • 81ea7fd test: allow file protocol in git submodule test
    • 3ea9b7e test: update Jest snapshot format
    • 0c635c7 ci: install latest npm for older Node.js versions
    • 5f1a00e ci: bump GitHub Actions' versions
    • 336f3b5 fix(deps): update all dependencies
    • ec995e5 fix(deps): update all dependencies
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 0
  • Bump postcss-cli from 8.3.1 to 10.1.0

    Bump postcss-cli from 8.3.1 to 10.1.0

    Bumps postcss-cli from 8.3.1 to 10.1.0.

    Changelog

    Sourced from postcss-cli's changelog.

    10.1.0 / 2022-11-29

    • Allow running --watch mode in non-TTY contexts, like Docker (#448)
    • Update dependencies

    10.0.0 / 2022-06-29

    • BREAKING: Drop Node 12 support (#438)
    • Add support for ESM config files (#437)

    9.1.0 / 2021-12-10

    • Don't write to files if they're unchanged (#320, #417)

    9.0.2 / 2021-11-04

    • Switch to picocolors (#409)
    • Remove test files from npm package

    9.0.1 / 2021-09-28

    • Actually exit with error when attempting to stdout in watch mode
    • Remove bin/ from files in package.json

    9.0.0 / 2021-09-24

    • BREAKING: Require Node.js v12+
    • BREAKING: Must specify full file path, including .js extension, when loading local plugins with --use (#401)
    • BREAKING: Officially remove support for watching postcss config (was already broken in previous releases)
    • Add support for dir-dependency messages (#383, #391)
    • Update deps
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 0
  • Can you add animations for more elements?

    Can you add animations for more elements?

    Is your feature request related to a problem? Please describe.

    No, animate.css is really great but its restricted to Text by default

    Describe the solution you'd like.

    if you can add more animations specific to different html elements like button, radio/check box, drop down controls, sliders, toggles and more

    it would be great. also if you can allow us to use remote animation scripts [like fontawesome] it will be even more terrific

    Describe alternatives you've considered.

    lots of workarounds are there animate.css as an extensive library would be great

    Additional Context

    No response

    feature request 
    opened by davidjeba 1
Releases(v4.1.1)

  • v4.1.1(Sep 7, 2020)

  • v4.1.0(May 13, 2020)

  • v4.0.0(May 7, 2020)

    • New animations:
      • ShakeY
      • fadeInTopLeft
      • fadeInTopRight
      • fadeInBottomLeft
      • fadeInBottomRight
      • fadeOutTopLeft
      • fadeOutTopRight
      • fadeOutBottomRight
      • fadeOutBottomLeft
      • lightSpeedInRight
      • lightSpeedInLeft
      • lightSpeedOutRight
      • lightSpeedOutLeft
      • backOutDown
      • backOutLeft
      • backOutRight
      • backOutUp
      • Bouncing entrances
      • bounceIn
      • bounceInDown
      • bounceInLeft
      • bounceInRight
      • bounceInUp
    • Improved animations
    • Adds prefix animate__ to all classes, avoiding CSS class clashes
    • Adds new utility classes
    • Adds CSS custom properties support
    • Leaner and up-to-date dependencies build system
    • Updates demo-website layout
    • Add and improve documentation and build system to the demo-website
    Source code(tar.gz)
    Source code(zip)

  • 3.7.2(Jun 4, 2019)

  • v3.7.1(May 29, 2019)

    This release patches the media-query prefers-reduced-motion according to the new specs and avoid some unexpected problems. Fixes #932 #934 #928.

    Source code(tar.gz)
    Source code(zip)

  • 3.7.0(Jul 23, 2018)

    • Modify animation speed/duration with fast, faster, slow, slower class names
    • Modify delay with delay-1s, delay-2s, delay-3s class names
    • Added support for reduced-motion media queries to disable animations for users who prefer reduced motion
    • An added animation: heartBeat
    • Documentation and dev dependencies have been updated
    • Updated to Gulp 4
    Source code(tar.gz)
    Source code(zip)

  • v3.6.2(Jul 21, 2018)

    • New Animation: jackInTheBox
    • Improved documentation
    • Several bug fixes
    • Better compatibility (no more transform: none)
    • Added prettier (nice code formatting 💅)
    Source code(tar.gz)
    Source code(zip)

  • 3.5.2(Jun 6, 2016)

  • 3.5.1(Jan 2, 2016)

  • 3.5.0(Dec 14, 2015)

    By popular demand, animate.css’s dev environment is now a Gulp thing. This release updates the codebase to use Gulp and adds some minor changes to bring the release up to date with master.

    Source code(tar.gz)
    Source code(zip)

  • 3.4.0(Aug 6, 2015)

  • 3.3.0(May 17, 2015)

  • 4.0.0.alpha-1(Mar 25, 2015)

    A Sass port/rewrite of Animate.css. Features pending, but this is mostly a functionality—as opposed to design/animation—update. Some non-trivial changes include:

    • Restructured files such that compiled CSS is in a new dist directory
    • Added a mixin to allow easy inclusions of animations on any element
    • Variables to adjust animation duration and the animation hook class name

    Please add feedback to the open PR for the 4.0 release (#277).

    Source code(tar.gz)
    Source code(zip)

  • 3.2.5(Mar 19, 2015)

  • 3.2.3(Mar 4, 2015)

  • 3.2.2(Mar 4, 2015)

  • 3.2.1(Feb 20, 2015)

  • 3.2.0(Jul 6, 2014)

    • 3d transforms for better performance on hardware acceleration (where available - resolves #238)
    • Removal of a lot of unnecessary code
    • Rewrite of many animations to make them just that little bit more delightful
    Source code(tar.gz)
    Source code(zip)

  • 3.1.1(Apr 22, 2014)

  • 3.1.0(Feb 21, 2014)

  • 3.0.0(Nov 23, 2013)

  • 2.1.1(Nov 9, 2013)

Owner
Animate.css
Animate.css
GitHub https://animate.style/
tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.

tsParticles - TypeScript Particles A lightweight TypeScript library for creating particles. Dependency free (*) and browser ready! Particles.js conver

Matteo Bruni 4.7k Jan 4, 2023
:dizzy: TransitionEnd is an agnostic and cross-browser library to work with transitionend event.

TransitionEnd TransitionEnd is an agnostic and cross-browser library to work with event transitionend. Browser Support 1.0+ ✔ 4.0+ ✔ 10+ ✔ 10.5 ✔ 3.2+

Evandro Leopoldino Gonçalves 95 Dec 21, 2022
Animation Academy teaches you CSS animations using the transition and animation properties.

Animation Academy Open Animation Academy > Contents Background Built With Functionality Feature Highlights Wireframes Features In Development Backgrou

Jacob Benowitz 6 Jun 23, 2022
Javascript library to create physics-based animations

Dynamics.js Dynamics.js is a JavaScript library to create physics-based animations To see some demos, check out dynamicsjs.com. Usage Download: GitHub

Michael Villar 7.5k Jan 6, 2023
Nebula is a lightweight (1kb compressed) JavaScript library that creates beautiful universe animations.

Nebula is a lightweight JavaScript library for creating beautiful universe animations. Including configurable Stars, Nebulas, Comets, Planets and Suns. Compatible with SSR

Florian DE LA COMBLE 34 Nov 25, 2022
Create beautiful CSS3 powered animations in no time.

Bounce.js Bounce.js is a tool and JS library for generating beautiful CSS3 powered keyframe animations. The tool on bouncejs.com allows you to generat

Tictail 6.2k Dec 30, 2022
A jquery plugin for CSS3 text animations.

Textillate.js v0.4.1 See a live demo here. Textillate.js combines some awesome libraries to provide an easy-to-use plugin for applying CSS3 animations

Jordan Schroter 3.6k Jan 2, 2023
A simple and easy jQuery plugin for CSS animated page transitions.

Animsition A simple and easy jQuery plugin for CSS animated page transitions. Demo & Installation http://git.blivesta.com/animsition/ Development Inst

Yasuyuki Enomoto 3.8k Dec 17, 2022
Animation library that mimics CSS keyframes when scrolling.

Why Motus ? Motus allows developers to create beatuful animations that simulate css keyframes and are applied when the user scrolls. Features Node & B

Alexandru Cambose 580 Dec 30, 2022
🐿 Super easy and lightweight(<3kb) JavaScript animation library

Overview AniX - A super easy and lightweight javascript animation library. AniX is a lightweight and easy-to-use animation library with excellent perf

anonymous namespace 256 Sep 19, 2022
Javascript version of the Move language compiler, supports compiling Move code into Move bytecode in the browser.

move-js Javascript version of the move language compiler, supports compiling Move code into move bytecode in the browser. Features Compiling move pack

Starcoin 13 Dec 20, 2022
Lightweight, simple to use jQuery plugin to animate SVG paths

jQuery DrawSVG This plugin uses the jQuery built-in animation engine to transition the stroke on every <path> inside the selected <svg> element, using

Leonardo Santos 762 Dec 20, 2022
Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation

Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation

Mladen Plavsic 334 Dec 11, 2022
A lightweight JavaScript library for creating particles

particles.js A lightweight JavaScript library for creating particles. Demo / Generator Configure, export, and share your particles.js configuration on

Vincent Garreau 26.7k Jan 8, 2023
GreenSock's GSAP JavaScript animation library (including Draggable).

GSAP (GreenSock Animation Platform) Professional-grade animation for the modern web GSAP is a robust JavaScript toolset that turns developers into ani

GreenSock 15.5k Jan 8, 2023
Javascript and SVG odometer effect library with motion blur

SVG library for transitioning numbers with motion blur JavaScript odometer or slot machine effect library for smoothly transitioning numbers with moti

Mike Skowronek 793 Dec 27, 2022
Responsive, interactive and more accessible HTML5 canvas elements. Scrawl-canvas is a JavaScript library designed to make using the HTML5 canvas element a bit easier, and a bit more fun!

Scrawl-canvas Library Version: 8.5.2 - 11 Mar 2021 Scrawl-canvas website: scrawl-v8.rikweb.org.uk. Do you want to contribute? I've been developing thi

Rik Roots 227 Dec 31, 2022
GreenSock's GSAP JavaScript animation library (including Draggable).

GSAP (GreenSock Animation Platform) Professional-grade animation for the modern web GSAP is a robust JavaScript toolset that turns developers into ani

GreenSock 15.4k Jan 5, 2023
A library to add a virtual Trackball to your DOM

Trackball.js - 3D Trackballs for your Website Trackball.js is a small JavaScript library on top of Quaternion.js to enable free 3D rotation of element

Robert Eisele 34 Nov 27, 2022