Animate.css
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 |
Animate.css Creator | Maintainer | Core Contributor |
License
Animate.css is licensed under the Hippocratic License.
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.
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.)
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).
Feature/new demo site
This PR restructure and implements a new layout for the demo website. You can see it live here.
Solves #837 .
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.
[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?
Remove npm-shrinkwrap.json file
Suggesting to remove the
npm-shrinkwrap.json
file for these reasons:Update Website
I'd like to keep the website as simple and straightforward as it currently is, but perhaps rewrite it to:
Animate.css Builder Web Version
Animate.css Builder Web Version
form > select
.The Root Code ( not test ), is updated with the new animations.
Preview 1
Preview 2
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.
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
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...
Bump husky from 7.0.4 to 8.0.3
Bumps husky from 7.0.4 to 8.0.3.
Release notes
Sourced from husky's releases.
Commits
3c0e08d
8.0.31ed3f9a
fix: change message500d450
fix: add git not installed error message (#1208)2945907
chore(deps): bump minimatch from 3.0.4 to 3.1.2 (#1229)9f6dac4
chore: remove stale botf6c2c06
chore: update package-lock.jsonf862dc2
chore: update devDependencies9efb720
8.0.2573de60
docs: remove deprecated npm set-script3db28d4
chore: increase daysUntilStaleDependabot 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)Bump eslint from 7.32.0 to 8.31.0
Bumps eslint from 7.32.0 to 8.31.0.
Release notes
Sourced from eslint's releases.
... (truncated)
Changelog
Sourced from eslint's changelog.
... (truncated)
Commits
d9a39c7
8.31.05d182ce
Build: changelog update for 8.31.065d4e24
chore: Upgrade@​eslint/eslintrc
@​1
.4.1 (#16729)35439f1
fix: correct syntax error inprefer-arrow-callback
autofix (#16722)87b2470
fix: new instance of FlatESLint should load latest config file version (#16608)8d93081
chore: fix CI failure (#16721)4339dc4
docs: Update README8f17247
chore: Set up automatic updating of README (#16717)4e4049c
docs: optimize code block structure (#16669)54a7ade
docs: do not escape code blocks of formatters examples (#16719)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)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.
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.
Commits
3f06816
15.1.090e035b
add data url support (#515)2c0c3e9
15.0.12db3239
Correctly sort media queries before joining them (#513)2780457
Preserve layer in ignored import statements (#511)13376a6
Update dependency prettier to ~2.8.0 (#508)22864f1
Update test results for PostCSS 8.4.19 (#507)99d755b
Update dependency ava to v5 (#506)9f6376b
Update dependency eslint-config-problems to v7 (#504)11922cd
Update tests results for postcss v8.4.17 (#503)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)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.
... (truncated)
Commits
eabf1d2
feat: expose cli entrance from "lint-staged/bin" (#1237)a987e6a
docs: add note about multiple configs files to READMEc4fb7b8
docs: add note about git hook TTY to READMEe2bfce1
test: remove Windows snapshot workaround81ea7fd
test: allow file protocol in git submodule test3ea9b7e
test: update Jest snapshot format0c635c7
ci: install latest npm for older Node.js versions5f1a00e
ci: bump GitHub Actions' versions336f3b5
fix(deps): update all dependenciesec995e5
fix(deps): update all dependenciesDependabot 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)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.
Commits
a3574b1
10.1.083771bd
Allow non-TTY stdin watch mode (#448)e939a68
Update dependency fs-extra to v11 (#447)1cd25c2
Update dependency prettier to ~2.8.0 (#445)9fdc954
Update dependency eslint-config-problems to v7 (#443)dcdef56
Update dependency slash to v5 (#442)e1b551e
Update dependency postcss-import to v15 (#439)7bf54af
Update dependency uuid to v9 (#440)e5419b5
10.0.0d779476
Add tests for ESM configDependabot 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)