PHPackages daneden/animate.css - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. daneden/animate.css ActiveLibrary daneden/animate.css =================== 3.5.3(9y ago)189.9k↓32.3%6CSS Since Apr 21Pushed 9y ago2 watchersCompare [ Source](https://github.com/ange187/animate.css)[ Packagist](https://packagist.org/packages/daneden/animate.css)[ RSS](/packages/daneden-animatecss/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (1)DependenciesVersions (2)Used By (6) \#Animate.css [![GitHub release](https://camo.githubusercontent.com/eb3e03eaed736e68dfb0b7468c303bef69026be3f2a3c8b02aefb7c25c2ece87/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f64616e6564656e2f616e696d6174652e6373732e737667)](https://github.com/daneden/animate.css/releases) [![Build Status](https://camo.githubusercontent.com/2a524b4ef60827a54d0c6e9622a1bb26def122129692bd57b412e97348374b77/68747470733a2f2f7472617669732d63692e6f72672f576172656e476f6e7a6167612f616e696d6174652e6373732e7376673f6272616e63683d6d6173746572)](https://travis-ci.org/WarenGonzaga/animate.css) [![devDependencies Status](https://camo.githubusercontent.com/44b354f1319d7e136d2bfd6b2b6c9670dcb4a8897c0514ade3e556479c398bec/68747470733a2f2f64617669642d646d2e6f72672f576172656e476f6e7a6167612f616e696d6174652e6373732f6465762d7374617475732e737667)](https://david-dm.org/WarenGonzaga/animate.css?type=dev) [![chat](https://camo.githubusercontent.com/b1b4ff7dc3cfb48798781f205ea0541a47ec4de500de53b6e37cba8556998040/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f636861742d6769747465722d677265656e2e737667)](https://gitter.im/animate-css/Lobby)*Just-add-water CSS animation* `animate.css` is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness. Installation ------------ [](#installation) To install via Bower, simply do the following: ``` $ bower install animate.css --save ``` or you can install via npm: ``` $ npm install animate.css --save ``` \##Basic Usage 1. Include the stylesheet on your document's `` ``` ``` or use the version hosted by [CDNJS](https://cdnjs.com/libraries/animate.css) ``` ``` 2. Add the class `animated` to the element you want to animate. You may also want to include the class `infinite` for an infinite loop. 3. Finally you need to add one of the following classes: - `bounce` - `flash` - `pulse` - `rubberBand` - `shake` - `headShake` - `swing` - `tada` - `wobble` - `jello` - `bounceIn` - `bounceInDown` - `bounceInLeft` - `bounceInRight` - `bounceInUp` - `bounceOut` - `bounceOutDown` - `bounceOutLeft` - `bounceOutRight` - `bounceOutUp` - `fadeIn` - `fadeInDown` - `fadeInDownBig` - `fadeInLeft` - `fadeInLeftBig` - `fadeInRight` - `fadeInRightBig` - `fadeInUp` - `fadeInUpBig` - `fadeOut` - `fadeOutDown` - `fadeOutDownBig` - `fadeOutLeft` - `fadeOutLeftBig` - `fadeOutRight` - `fadeOutRightBig` - `fadeOutUp` - `fadeOutUpBig` - `flipInX` - `flipInY` - `flipOutX` - `flipOutY` - `lightSpeedIn` - `lightSpeedOut` - `rotateIn` - `rotateInDownLeft` - `rotateInDownRight` - `rotateInUpLeft` - `rotateInUpRight` - `rotateOut` - `rotateOutDownLeft` - `rotateOutDownRight` - `rotateOutUpLeft` - `rotateOutUpRight` - `hinge` - `rollIn` - `rollOut` - `zoomIn` - `zoomInDown` - `zoomInLeft` - `zoomInRight` - `zoomInUp` - `zoomOut` - `zoomOutDown` - `zoomOutLeft` - `zoomOutRight` - `zoomOutUp` - `slideInDown` - `slideInLeft` - `slideInRight` - `slideInUp` - `slideOutDown` - `slideOutLeft` - `slideOutRight` - `slideOutUp` Full example: ``` Example ``` [Check out all the animations here!](https://daneden.github.io/animate.css/) \##Usage To use animate.css in your website, simply drop the stylesheet into your document's ``, and add the class `animated` to an element, along with any of the animation names. That's it! You've got a CSS animated element. Super! ``` ``` or use the version hosted by [CDNJS](https://cdnjs.com/libraries/animate.css) ``` ``` You can do a whole bunch of other stuff with animate.css when you combine it with jQuery or add your own CSS rules. Dynamically add animations using jQuery with ease: ``` $('#yourElement').addClass('animated bounceOutLeft'); ``` You can also detect when an animation ends: ``` $('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething); ``` [View a video tutorial](https://www.youtube.com/watch?v=CBQGl6zokMs) on how to use Animate.css with jQuery here. **Note:** `jQuery.one()` is used when you want to execute the event handler at most *once*. More information [here](http://api.jquery.com/one/). You can also extend jQuery to add a function that does it all for you: ``` $.fn.extend({ animateCss: function (animationName) { var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; this.addClass('animated ' + animationName).one(animationEnd, function() { $(this).removeClass('animated ' + animationName); }); } }); ``` And use it like this: ``` $('#yourElement').animateCss('bounce'); ``` You can change the duration of your animations, add a delay or change the number of times that it plays: ``` #yourElement { -vendor-animation-duration: 3s; -vendor-animation-delay: 2s; -vendor-animation-iteration-count: infinite; } ``` *Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, etc)* Custom Builds ------------- [](#custom-builds) Animate.css is powered by [gulp.js](http://gulpjs.com/), and you can create custom builds pretty easily. First of all, you’ll need Gulp and all other dependencies: ``` $ cd path/to/animate.css/ $ sudo npm install ``` Next, run `gulp` to compile your custom builds. For example, if you want only some of the “attention seekers”, simply edit the `animate-config.json` file to select only the animations you want to use. ``` "attention_seekers": { "bounce": true, "flash": false, "pulse": false, "shake": true, "headShake": true, "swing": true, "tada": true, "wobble": true, "jello":true } ``` License ------- [](#license) Animate.css is licensed under the MIT license. () Contributing ------------ [](#contributing) Pull requests are the way to go here. I apologise in advance for the slow action on pull requests and issues. I 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](http://codepen.io). That last one is important. ### Health Score 37 — LowBetter than 83% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity31 Limited adoption so far Community28 Small or concentrated contributor base Maturity63 Established project with proven stability Bus Factor1 Top contributor holds 62% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 3314d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/66efa4c4cf0d387e8085081b04af668bc3dc7ebea307683bcd5744d08ed1d235?d=identicon)[ange187](/maintainers/ange187) --- Top Contributors [![daneden](https://avatars.githubusercontent.com/u/439365?v=4)](https://github.com/daneden "daneden (194 commits)")[![suissa](https://avatars.githubusercontent.com/u/75607?v=4)](https://github.com/suissa "suissa (42 commits)")[![woneob](https://avatars.githubusercontent.com/u/1608783?v=4)](https://github.com/woneob "woneob (11 commits)")[![procodeing](https://avatars.githubusercontent.com/u/10468507?v=4)](https://github.com/procodeing "procodeing (9 commits)")[![sarbbottam](https://avatars.githubusercontent.com/u/949380?v=4)](https://github.com/sarbbottam "sarbbottam (8 commits)")[![WarenGonzagaOfficial](https://avatars.githubusercontent.com/u/11012763?v=4)](https://github.com/WarenGonzagaOfficial "WarenGonzagaOfficial (7 commits)")[![Hackzzila](https://avatars.githubusercontent.com/u/11618364?v=4)](https://github.com/Hackzzila "Hackzzila (4 commits)")[![zvuc](https://avatars.githubusercontent.com/u/2870726?v=4)](https://github.com/zvuc "zvuc (3 commits)")[![mesge](https://avatars.githubusercontent.com/u/3252430?v=4)](https://github.com/mesge "mesge (3 commits)")[![angelorohit](https://avatars.githubusercontent.com/u/1012057?v=4)](https://github.com/angelorohit "angelorohit (3 commits)")[![anthonydelgado](https://avatars.githubusercontent.com/u/5355714?v=4)](https://github.com/anthonydelgado "anthonydelgado (2 commits)")[![ange187](https://avatars.githubusercontent.com/u/13964595?v=4)](https://github.com/ange187 "ange187 (2 commits)")[![loganbfisher](https://avatars.githubusercontent.com/u/1943982?v=4)](https://github.com/loganbfisher "loganbfisher (2 commits)")[![danrodney](https://avatars.githubusercontent.com/u/1936721?v=4)](https://github.com/danrodney "danrodney (2 commits)")[![marcobiedermann](https://avatars.githubusercontent.com/u/5244986?v=4)](https://github.com/marcobiedermann "marcobiedermann (2 commits)")[![tzi](https://avatars.githubusercontent.com/u/415891?v=4)](https://github.com/tzi "tzi (2 commits)")[![FelipeMartinin](https://avatars.githubusercontent.com/u/5143508?v=4)](https://github.com/FelipeMartinin "FelipeMartinin (2 commits)")[![jeremyricketts](https://avatars.githubusercontent.com/u/504457?v=4)](https://github.com/jeremyricketts "jeremyricketts (2 commits)")[![jabranr](https://avatars.githubusercontent.com/u/2131246?v=4)](https://github.com/jabranr "jabranr (2 commits)")[![LubomirGeorgiev](https://avatars.githubusercontent.com/u/5230079?v=4)](https://github.com/LubomirGeorgiev "LubomirGeorgiev (1 commits)") ### Embed Badge ![Health badge](/badges/daneden-animatecss/health.svg) ``` [![Health](https://phpackages.com/badges/daneden-animatecss/health.svg)](https://phpackages.com/packages/daneden-animatecss) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)