Want to take your software engineering career to the next level? Join the mailing list for career tips & advice Click here

animate.css

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

Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star half bd79095782ee4930099175e5ce7f4c89fa3ddabcd56fffcc7c74f6f2a2d46b27 (2 ratings)
Rated 4.75 out of 5
Subscribe to updates I use animate.css


Statistics on animate.css

Number of watchers on Github 67344
Number of open issues 4
Average time to close an issue 27 days
Main language CSS
Average time to merge a PR 14 days
Open pull requests 64+
Closed pull requests 81+
Last commit 3 months ago
Repo Created about 9 years ago
Repo Last Updated 3 months ago
Size 943 KB
Homepage https://animate.s...
Organization / Authoranimate-css
Latest Releasev4.1.0
Contributors56
Page Updated
Do you use animate.css? Leave a review!
View open issues (4)
View animate.css activity
View on github
Book a Mock Interview With Me (Silicon Valley Engineering Leader, 100s of interviews conducted)
Software engineers: It's time to get promoted. Starting NOW! Subscribe to my mailing list and I will equip you with tools, tips and actionable advice to grow in your career.
Evaluating animate.css for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)
What people are saying about animate.css Leave a review
love animations!

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
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 callmeelton@gmail.com.

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.

animate.css open issues Ask a question     (View All Issues)
  • almost 4 years Animation in Google Chrome Not Fluid
  • almost 4 years Bad naming effects!!!
  • almost 4 years 'Jello' animation incompatible with latest iOS Safari?
  • almost 4 years animate.css and jquery in new firefox
  • about 4 years Uncaught SyntaxError: Invalid or unexpected token
  • about 4 years How to replicate the random text color generator used in this website?
  • about 4 years How do I get the animation to start on scroll?
  • about 4 years Regression on bounce animate.min.css introduced in 3.5.1
  • about 4 years Add prefix
  • over 4 years Animate.css not working in chrome 51.0 but works in firefox
  • over 4 years How to repeat chained animations?
  • over 4 years Version number not incremented in latest release
  • over 4 years Animate.css and typeahead z-index problems.
  • over 4 years New class for speed of animation
  • over 4 years Using jQuery addClass not working with uppercase characters
  • over 4 years animate-config.json structure
  • over 4 years gulp autoperfix not work
  • over 4 years Animate to Transformed State
  • over 4 years Webpack loader - if you want to include a link.
  • over 4 years animate not working at Windows Phone
  • over 4 years Performance Improvement Hints (will-change)
  • over 4 years Animations not working correctly in IE10
  • over 4 years How to make it shows shadow and save z-index?
  • almost 5 years Add sliding animations to animate.scss
  • almost 5 years animations not working in iOS 9.2 safari
  • almost 5 years Add changelog
  • almost 5 years Use filtering (bilinear or bicubic) for animations that use scale3d
  • almost 5 years Pulse causing placement and border-radius issues
  • almost 5 years Bower - Use dist/ for final product
  • almost 5 years Element disappearing after animate (flipInX) – Safari 9 OS X
animate.css open pull requests (View All Pulls)
  • Add cwd option for gulp.src
  • Updated year in licence
  • Move files to dist directory
  • New animation proposal: Float
  • New animation: Squash
  • replace transform: none to transform: translate3d(0,0,0)
  • changed project name to animate-css in bower.json
  • +Added new short fade transitions
  • Switch to Sass
  • gulp: polyfill for old node version
  • Synchronize master / gh-pages branches / demo task (watch, connect)
  • #479 fixes bounceIn animations for iOS devices
  • Animate.css Builder Web Version
  • #537 will-change performance improvements
  • Update README.md
  • Config generator
  • Remove double "the" from README.md
  • [bower.json] source dir removed from the ignore array
  • Updated Readme.md
  • Added hosted libraries into README.md
  • Update README.md
  • Add blur animations
  • chore(build): removed redundant postcss operation
  • Prevent double execution of code on animation end
  • Note animatify for Browserify users in the README
  • support es6 syntax & gulp serve
  • added new animation style - advertise
  • add npm installation to readme
  • Added option to keep results of animations.
  • Update README.md
  • The SmallCDN is no longer working
  • 修改animate
  • Replace unnecessary jQuery $(this) to this
  • Animate.css Builder Web Version
  • Bronken link
  • New Special - jackInTheBox
  • Add CDNJS version badge in readme
  • Remove event names for prehistoric browsers from README
  • recommend using SRI hashes and `crossover` attributes
  • zero
  • added sass/eyeglass support
  • added new animation name bye
  • Fixed Custom Builds
  • Add jackInTheBox to gh-pages
  • New Animation: Fold
  • Custom Built JSON
  • Fix broken headings in Markdown files
  • added a space
  • fix headings
  • Add animation chaining to README example
  • explain primitive chaining of animations (in README)
  • New animations: zoomInFront, zoomOutFront
  • Format fix for README.md
  • readme markup fix
  • format
  • format
  • Made class list a Markdown table in README
  • Animate.css Builder Web Version (Fixed)
  • Added an animation called stretch
  • New Twist animations added
  • Adding in README.md a pure javascript to create a simple animateCss function in HTMLElement prototype
  • Minor Update and Fixes
  • Delete verbose code.
  • verbose opacity
animate.css questions on Stackoverflow (View All Questions)
  • onclick with javascript and animate.css
  • Animate.css not working dont know why?
  • animate.css: How do you have the css animation work only the first time?
  • How to use the `Animate.css` to the `angular` app?
  • onload add class animate.css
  • Animate.css on scroll bug chrome/firefox
  • animate.css animating distance
  • Trigger jQuery animate.css function
  • bxslider text effects animate.css
  • animate.css: repeating animations
  • transform rotate() not working with Animate.css
  • How to run the custom animate.css grunt task from my grunt file?
  • FIrefox animate.css animations not consistent
  • jQuery animate.css not working correctly on Firefox only
  • Animate.css and fixed positioning
  • Animate.css Not working
  • Animate.CSS Replay?
  • Mobile browsers leaving whitespace with Animate.css
  • How to adjust the height for fadeInUp in ng-animate or Animate.css?
  • How to add interval between cycles of css animation which is coded in animate.css?
  • Build a simple ticker that change the divs every 6 seconds using animate.css
  • Animate.css Messing Up My Site
  • animate.css - Detect the animation end
  • Why can I not access an element after it has been animated in jQuery and Animate.css?
  • How to adding animate.css animation when an element is shown with jQuery
  • Animate.css causing black rects in Firefox
  • jQuery + Animate.css animation only working once, animation not resetting
  • Is arrangement of Animate.css and main.css files affecting functionality
  • Ionic Framework animate.css slideInUp and SlideOutUp animation not working
  • Animate in order with angular and animate.css
animate.css list of languages used
animate.css latest release notes

Fix problems with some blunder and postcss.

  • 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
Other projects in CSS
Powered by Autocode - Instant Webhooks, Scripts and APIs
Autocode logo wordmark