animate.css/docsSource/sections/02-utilities.md

94 lines
3.3 KiB
Markdown
Raw Normal View History

v4 release (#1050) * New animations added * Update * Update * Update * Update * kill bower * Turn off animations for print media query (#856) * Add a feature to turn off animations for printing as requested. * Add print media type * Update the builds * Moved away from gulp to npx + postcss This PR changes the build system for a simpler one, using only npx as runner and postcss to process all the files. * Solves #618 * Solves #836 * Also solves #758 just for fun ;P * Updated travis and removed animate-config.json * Removed strayed gulpfile and trimmed the header * Moved prefix config to package.json and updated the tasks * Updated travis * Updated dependencies and postcss config * Now using CSS custom properties * Add css module file - solves #933 * Updated README for the new build * Rebulit files * Updated dependencies + added browserlist * Fixed small typo on README * Added imports to Back animations * Added FadeInTopLeft.css file Fade in the animation diagonally * Added fadeInTopRight.css file Fade in the animation diagonally * Added fadeInBottomLeft.css * Added fadeInBottomRight.css * Added fadeOutTopLeft.css * Added fadeOutTopRight.css * Added fadeOutBottomRight.css * Added fadeOutBottomLeft.css * Added imports to diagonal fadings * Aditional formatting * Added diagonal fadings to README * Fixes #966 * Animate.css v4 Updates (#1029) * Update to v4 * Add Iteration-Count CSS utility classes solves #998 * Updated builds * Update lightSpeed animations * Update builds * Fix Invalid CSS Media Query Syntax * Update build * Add gitpod support * Add newline in gitpod file * Update README * Revert * Declare variable * Update builds * Remove Gitpod support Co-authored-by: Waren Gonzaga <warengonzaga.dev@gmail.com> * Improves building process and package.json tidy up * Improved animations (#901) * Improved bounce * Improved pulse * Improved bounceInDown * Improved bounceInLeft * Improved bounceInRight * Improved bounceInUp * Improved bounceOutDown * Improved bounceOuLeft * Improved bounceOuRight * Improved bounceOutRight * Improved fadeInDown * Improved fadeInDownBig * Improved fadeInLeft * Improved fadeInLeftBig * Improved fadeInRightBig * Improved fadeInUp * Improved fadeInUpBig * Improved fadeInRight * Reverted fade animations * Compiled * Updated prefers-reduced-motion support on README * Add .delay-1s (#982) The .delay-1s is missing from the readme * HTTPS relevant links on README (#972) prevents HTTP redirects * Create CONTRIBUTING.md (#1033) Co-authored-by: Melek REBAI <melek.rebai89@gmail.com> Co-authored-by: Christian Oliff <christianoliff@yahoo.com> Co-authored-by: Daniel Eden <dan.eden@me.com> * Updates dependencies * Updates prettier config * refactory transform-origin in styles * animation shake with X and Y options :hammer: * Adds shakeX and shakeY to the build * Set 0 Opacity to Out animation classes (#1043) * Update issue templates * Add 0 opacity to out classes * Update builds * Improved implemenation * Update builds * Update current readme * Update builds Co-authored-by: Elton Mesquita <callmeelton@gmail.com> Co-authored-by: Waren Gonzaga <warengonzaga.dev@gmail.com> * Removes prefix from att selector * Feature/new demo site (#1046) * Simplify & centralize the Animate.css home page. Finally. * Design tweak * Fix Lightspeed demos * Fix Lightspeed demos (cont.) * Trigger animation on change as well as click * Correct jQuery example. Fixes #127 * Remove Readme on gh-pages to prevent mistakes like ee75b81 * Use animate.min.css because whatever * Update demo page with MS animation JS hooks. * Updating home page with rubberBand animation. * Reverse hue animation Red-orange-brown isn’t a great first impression. * Add readme, use cssmin minified CSS instead of csso * Update gh-pages * Remove protocol from urls Fixes Chrome’s SSL issue * Remove Square Cash link Donations are weird, and only US account holders could use this. * Updating Gh-page animate.css to the current version This is a simple commit, bringing animate.css up to date with the current master version. * Updating Gh-page animate.min.css to reflect the current version This is a simply update to the Animate.min.css file, to reflect the current version * Update CSS * Updating Gh-page index.html to the reflect the addition of zooms (in out down etc) This adds the optgroup "zoom", and associated options of: ZoomIn, zoomOut, zoomInDown, zoomInUp, zoomInLeft, zoomInRight, zoomOutLeft, zoomOutRight, zoomOutUp, and zoomOutDown. * refactoring index.html to mimic the current optgroup styling I added zooms, which were absent, but added them in a way that didn't reflect the current optgroup styling and delineation. I fixed that and now exits and entrances are grouped appropriately. * updated index.html to reflect the standard optgroup styling on sliders, added slideInDown In addition to adding slider keyframes that were missing, I placed them into the appropriate optgroups to mimic the similar styling of the other animations. * Merging updated version of animate.min.css As requested, this is the updated version of animate.min.css that @daneden request I include in the pull request. * Updated animate.min.css Made it the new version * added jello to options * Update CSS * Add jackInTheBox to gh-pages (#694) * New Special - jackInTheBox * copy min.css from master branch * fixed the issue of overflow scroll (#740) for more see this issue https://github.com/daneden/animate.css/issues/739 * Adds heartBeat animation demo (#893) * Update animate.min.css to latest version * Updated CSS for current browsers * Updated animate.css * Removed useless test folder * Added warn about prefers-reduced-motion * Adds docs compiler * Adds new base template * Improves the docs compiler * Fixes flipOutY animation * Updates docs template and build * Reorder docs sections * Updates docs animation list template * Updates prettier ignore * Adds syntax highlight to docs * Small fixes to docs content * Updates templates HTML * Styles the demo website * Adds functionality to demo website * Fixes small website demo issue with medium screens * Adds copy animation to demo site * Renames loop classes to repeat * Small adjusts to docs styles * Updates docs template * Updates docs improving copy and adding sections * Reviews the docs copy * Fix some issues with demo-site * Fixes issue with the demo-site playground * Adjusts tooltip on demo-site * Fix layout issues on mobile and update “close” button for animations list Co-authored-by: Daniel Eden <dan.eden@me.com> Co-authored-by: Matt Willis <contact@mrwillis.net> Co-authored-by: Gabrielmtn <Gabrielmtn@gmail.com> Co-authored-by: Indy Prieto <proforced@gmail.com> Co-authored-by: Robert Pemberton <hellorobertp@gmail.com> Co-authored-by: Khaled nuur <kahalidnuur@gmail.com> Co-authored-by: Vladimir Jovanović <vladimir.jovanovic993@gmail.com> * Updates docs folders * Fix some small documentation issues * Updates edit on github link Co-authored-by: Arda Gedik <arnoldsivastanegezer@hotmail.com> Co-authored-by: Arda Gedik <ardagedikk@hotmail.com> Co-authored-by: Jabran Rafique <jabran.rafique@ratedpeople.com> Co-authored-by: Waren Gonzaga <waren.gonzaga.dev@gmail.com> Co-authored-by: Jabran Rafique⚡️ <jabranr@users.noreply.github.com> Co-authored-by: Vaibhav Tandon <vaibhav.tandongcet@gmail.com> Co-authored-by: Waren Gonzaga <warengonzaga.dev@gmail.com> Co-authored-by: Melek REBAI <melek.rebai89@gmail.com> Co-authored-by: Christian Oliff <christianoliff@yahoo.com> Co-authored-by: Daniel Eden <dan.eden@me.com> Co-authored-by: Lucas Ferreira Lima <lucasferreiralimax@gmail.com> Co-authored-by: Matt Willis <contact@mrwillis.net> Co-authored-by: Gabrielmtn <Gabrielmtn@gmail.com> Co-authored-by: Indy Prieto <proforced@gmail.com> Co-authored-by: Robert Pemberton <hellorobertp@gmail.com> Co-authored-by: Khaled nuur <kahalidnuur@gmail.com> Co-authored-by: Vladimir Jovanović <vladimir.jovanovic993@gmail.com>
2020-05-07 17:42:33 +02:00
## Utility classes
Animate.css comes packed with a few utility classes to simplify its use.
### Delay classes
You can add delays directly on the element's class attribute, just like this:
```html
<div class="animate__animated animate__bounce animate__delay-2s">Example</div>
```
Animate.css provides the following delays:
| Class name | Default delay time |
| ------------------- | ------------------ |
| `animate__delay-2s` | `2s` |
| `animate__delay-3s` | `3s` |
| `animate__delay-4s` | `4s` |
| `animate__delay-5s` | `5s` |
The provided delays are from 1 to 5 seconds. You can customize them setting the `--animate-delay` property to a longer or a shorter duration:
```css
/* All delay classes will take 2x longer to start */
:root {
--animate-delay: 2s;
}
/* All delay classes will take half the time to start */
:root {
--animate-delay: 0.5s;
}
```
### Slow, slower, fast, and Faster classes
You can control the speed of the animation by adding these classes, as below:
```html
<div class="animate__animated animate__bounce animate__faster">Example</div>
```
| Class name | Default speed time |
| ----------------- | ------------------ |
| `animate__slow` | `2s` |
| `animate__slower` | `3s` |
| `animate__fast` | `800ms` |
| `animate__faster` | `500ms` |
The `animate__animated` class has a default speed of `1s`. You can also customize the animations duration through the `--animate-duration` property, globally or locally. This will affect both the animations and the utility classes. Example:
v4 release (#1050) * New animations added * Update * Update * Update * Update * kill bower * Turn off animations for print media query (#856) * Add a feature to turn off animations for printing as requested. * Add print media type * Update the builds * Moved away from gulp to npx + postcss This PR changes the build system for a simpler one, using only npx as runner and postcss to process all the files. * Solves #618 * Solves #836 * Also solves #758 just for fun ;P * Updated travis and removed animate-config.json * Removed strayed gulpfile and trimmed the header * Moved prefix config to package.json and updated the tasks * Updated travis * Updated dependencies and postcss config * Now using CSS custom properties * Add css module file - solves #933 * Updated README for the new build * Rebulit files * Updated dependencies + added browserlist * Fixed small typo on README * Added imports to Back animations * Added FadeInTopLeft.css file Fade in the animation diagonally * Added fadeInTopRight.css file Fade in the animation diagonally * Added fadeInBottomLeft.css * Added fadeInBottomRight.css * Added fadeOutTopLeft.css * Added fadeOutTopRight.css * Added fadeOutBottomRight.css * Added fadeOutBottomLeft.css * Added imports to diagonal fadings * Aditional formatting * Added diagonal fadings to README * Fixes #966 * Animate.css v4 Updates (#1029) * Update to v4 * Add Iteration-Count CSS utility classes solves #998 * Updated builds * Update lightSpeed animations * Update builds * Fix Invalid CSS Media Query Syntax * Update build * Add gitpod support * Add newline in gitpod file * Update README * Revert * Declare variable * Update builds * Remove Gitpod support Co-authored-by: Waren Gonzaga <warengonzaga.dev@gmail.com> * Improves building process and package.json tidy up * Improved animations (#901) * Improved bounce * Improved pulse * Improved bounceInDown * Improved bounceInLeft * Improved bounceInRight * Improved bounceInUp * Improved bounceOutDown * Improved bounceOuLeft * Improved bounceOuRight * Improved bounceOutRight * Improved fadeInDown * Improved fadeInDownBig * Improved fadeInLeft * Improved fadeInLeftBig * Improved fadeInRightBig * Improved fadeInUp * Improved fadeInUpBig * Improved fadeInRight * Reverted fade animations * Compiled * Updated prefers-reduced-motion support on README * Add .delay-1s (#982) The .delay-1s is missing from the readme * HTTPS relevant links on README (#972) prevents HTTP redirects * Create CONTRIBUTING.md (#1033) Co-authored-by: Melek REBAI <melek.rebai89@gmail.com> Co-authored-by: Christian Oliff <christianoliff@yahoo.com> Co-authored-by: Daniel Eden <dan.eden@me.com> * Updates dependencies * Updates prettier config * refactory transform-origin in styles * animation shake with X and Y options :hammer: * Adds shakeX and shakeY to the build * Set 0 Opacity to Out animation classes (#1043) * Update issue templates * Add 0 opacity to out classes * Update builds * Improved implemenation * Update builds * Update current readme * Update builds Co-authored-by: Elton Mesquita <callmeelton@gmail.com> Co-authored-by: Waren Gonzaga <warengonzaga.dev@gmail.com> * Removes prefix from att selector * Feature/new demo site (#1046) * Simplify & centralize the Animate.css home page. Finally. * Design tweak * Fix Lightspeed demos * Fix Lightspeed demos (cont.) * Trigger animation on change as well as click * Correct jQuery example. Fixes #127 * Remove Readme on gh-pages to prevent mistakes like ee75b81 * Use animate.min.css because whatever * Update demo page with MS animation JS hooks. * Updating home page with rubberBand animation. * Reverse hue animation Red-orange-brown isn’t a great first impression. * Add readme, use cssmin minified CSS instead of csso * Update gh-pages * Remove protocol from urls Fixes Chrome’s SSL issue * Remove Square Cash link Donations are weird, and only US account holders could use this. * Updating Gh-page animate.css to the current version This is a simple commit, bringing animate.css up to date with the current master version. * Updating Gh-page animate.min.css to reflect the current version This is a simply update to the Animate.min.css file, to reflect the current version * Update CSS * Updating Gh-page index.html to the reflect the addition of zooms (in out down etc) This adds the optgroup "zoom", and associated options of: ZoomIn, zoomOut, zoomInDown, zoomInUp, zoomInLeft, zoomInRight, zoomOutLeft, zoomOutRight, zoomOutUp, and zoomOutDown. * refactoring index.html to mimic the current optgroup styling I added zooms, which were absent, but added them in a way that didn't reflect the current optgroup styling and delineation. I fixed that and now exits and entrances are grouped appropriately. * updated index.html to reflect the standard optgroup styling on sliders, added slideInDown In addition to adding slider keyframes that were missing, I placed them into the appropriate optgroups to mimic the similar styling of the other animations. * Merging updated version of animate.min.css As requested, this is the updated version of animate.min.css that @daneden request I include in the pull request. * Updated animate.min.css Made it the new version * added jello to options * Update CSS * Add jackInTheBox to gh-pages (#694) * New Special - jackInTheBox * copy min.css from master branch * fixed the issue of overflow scroll (#740) for more see this issue https://github.com/daneden/animate.css/issues/739 * Adds heartBeat animation demo (#893) * Update animate.min.css to latest version * Updated CSS for current browsers * Updated animate.css * Removed useless test folder * Added warn about prefers-reduced-motion * Adds docs compiler * Adds new base template * Improves the docs compiler * Fixes flipOutY animation * Updates docs template and build * Reorder docs sections * Updates docs animation list template * Updates prettier ignore * Adds syntax highlight to docs * Small fixes to docs content * Updates templates HTML * Styles the demo website * Adds functionality to demo website * Fixes small website demo issue with medium screens * Adds copy animation to demo site * Renames loop classes to repeat * Small adjusts to docs styles * Updates docs template * Updates docs improving copy and adding sections * Reviews the docs copy * Fix some issues with demo-site * Fixes issue with the demo-site playground * Adjusts tooltip on demo-site * Fix layout issues on mobile and update “close” button for animations list Co-authored-by: Daniel Eden <dan.eden@me.com> Co-authored-by: Matt Willis <contact@mrwillis.net> Co-authored-by: Gabrielmtn <Gabrielmtn@gmail.com> Co-authored-by: Indy Prieto <proforced@gmail.com> Co-authored-by: Robert Pemberton <hellorobertp@gmail.com> Co-authored-by: Khaled nuur <kahalidnuur@gmail.com> Co-authored-by: Vladimir Jovanović <vladimir.jovanovic993@gmail.com> * Updates docs folders * Fix some small documentation issues * Updates edit on github link Co-authored-by: Arda Gedik <arnoldsivastanegezer@hotmail.com> Co-authored-by: Arda Gedik <ardagedikk@hotmail.com> Co-authored-by: Jabran Rafique <jabran.rafique@ratedpeople.com> Co-authored-by: Waren Gonzaga <waren.gonzaga.dev@gmail.com> Co-authored-by: Jabran Rafique⚡️ <jabranr@users.noreply.github.com> Co-authored-by: Vaibhav Tandon <vaibhav.tandongcet@gmail.com> Co-authored-by: Waren Gonzaga <warengonzaga.dev@gmail.com> Co-authored-by: Melek REBAI <melek.rebai89@gmail.com> Co-authored-by: Christian Oliff <christianoliff@yahoo.com> Co-authored-by: Daniel Eden <dan.eden@me.com> Co-authored-by: Lucas Ferreira Lima <lucasferreiralimax@gmail.com> Co-authored-by: Matt Willis <contact@mrwillis.net> Co-authored-by: Gabrielmtn <Gabrielmtn@gmail.com> Co-authored-by: Indy Prieto <proforced@gmail.com> Co-authored-by: Robert Pemberton <hellorobertp@gmail.com> Co-authored-by: Khaled nuur <kahalidnuur@gmail.com> Co-authored-by: Vladimir Jovanović <vladimir.jovanovic993@gmail.com>
2020-05-07 17:42:33 +02:00
```css
/* All animations will take twice as long to finish */
:root {
--animate-duration: 2s;
v4 release (#1050) * New animations added * Update * Update * Update * Update * kill bower * Turn off animations for print media query (#856) * Add a feature to turn off animations for printing as requested. * Add print media type * Update the builds * Moved away from gulp to npx + postcss This PR changes the build system for a simpler one, using only npx as runner and postcss to process all the files. * Solves #618 * Solves #836 * Also solves #758 just for fun ;P * Updated travis and removed animate-config.json * Removed strayed gulpfile and trimmed the header * Moved prefix config to package.json and updated the tasks * Updated travis * Updated dependencies and postcss config * Now using CSS custom properties * Add css module file - solves #933 * Updated README for the new build * Rebulit files * Updated dependencies + added browserlist * Fixed small typo on README * Added imports to Back animations * Added FadeInTopLeft.css file Fade in the animation diagonally * Added fadeInTopRight.css file Fade in the animation diagonally * Added fadeInBottomLeft.css * Added fadeInBottomRight.css * Added fadeOutTopLeft.css * Added fadeOutTopRight.css * Added fadeOutBottomRight.css * Added fadeOutBottomLeft.css * Added imports to diagonal fadings * Aditional formatting * Added diagonal fadings to README * Fixes #966 * Animate.css v4 Updates (#1029) * Update to v4 * Add Iteration-Count CSS utility classes solves #998 * Updated builds * Update lightSpeed animations * Update builds * Fix Invalid CSS Media Query Syntax * Update build * Add gitpod support * Add newline in gitpod file * Update README * Revert * Declare variable * Update builds * Remove Gitpod support Co-authored-by: Waren Gonzaga <warengonzaga.dev@gmail.com> * Improves building process and package.json tidy up * Improved animations (#901) * Improved bounce * Improved pulse * Improved bounceInDown * Improved bounceInLeft * Improved bounceInRight * Improved bounceInUp * Improved bounceOutDown * Improved bounceOuLeft * Improved bounceOuRight * Improved bounceOutRight * Improved fadeInDown * Improved fadeInDownBig * Improved fadeInLeft * Improved fadeInLeftBig * Improved fadeInRightBig * Improved fadeInUp * Improved fadeInUpBig * Improved fadeInRight * Reverted fade animations * Compiled * Updated prefers-reduced-motion support on README * Add .delay-1s (#982) The .delay-1s is missing from the readme * HTTPS relevant links on README (#972) prevents HTTP redirects * Create CONTRIBUTING.md (#1033) Co-authored-by: Melek REBAI <melek.rebai89@gmail.com> Co-authored-by: Christian Oliff <christianoliff@yahoo.com> Co-authored-by: Daniel Eden <dan.eden@me.com> * Updates dependencies * Updates prettier config * refactory transform-origin in styles * animation shake with X and Y options :hammer: * Adds shakeX and shakeY to the build * Set 0 Opacity to Out animation classes (#1043) * Update issue templates * Add 0 opacity to out classes * Update builds * Improved implemenation * Update builds * Update current readme * Update builds Co-authored-by: Elton Mesquita <callmeelton@gmail.com> Co-authored-by: Waren Gonzaga <warengonzaga.dev@gmail.com> * Removes prefix from att selector * Feature/new demo site (#1046) * Simplify & centralize the Animate.css home page. Finally. * Design tweak * Fix Lightspeed demos * Fix Lightspeed demos (cont.) * Trigger animation on change as well as click * Correct jQuery example. Fixes #127 * Remove Readme on gh-pages to prevent mistakes like ee75b81 * Use animate.min.css because whatever * Update demo page with MS animation JS hooks. * Updating home page with rubberBand animation. * Reverse hue animation Red-orange-brown isn’t a great first impression. * Add readme, use cssmin minified CSS instead of csso * Update gh-pages * Remove protocol from urls Fixes Chrome’s SSL issue * Remove Square Cash link Donations are weird, and only US account holders could use this. * Updating Gh-page animate.css to the current version This is a simple commit, bringing animate.css up to date with the current master version. * Updating Gh-page animate.min.css to reflect the current version This is a simply update to the Animate.min.css file, to reflect the current version * Update CSS * Updating Gh-page index.html to the reflect the addition of zooms (in out down etc) This adds the optgroup "zoom", and associated options of: ZoomIn, zoomOut, zoomInDown, zoomInUp, zoomInLeft, zoomInRight, zoomOutLeft, zoomOutRight, zoomOutUp, and zoomOutDown. * refactoring index.html to mimic the current optgroup styling I added zooms, which were absent, but added them in a way that didn't reflect the current optgroup styling and delineation. I fixed that and now exits and entrances are grouped appropriately. * updated index.html to reflect the standard optgroup styling on sliders, added slideInDown In addition to adding slider keyframes that were missing, I placed them into the appropriate optgroups to mimic the similar styling of the other animations. * Merging updated version of animate.min.css As requested, this is the updated version of animate.min.css that @daneden request I include in the pull request. * Updated animate.min.css Made it the new version * added jello to options * Update CSS * Add jackInTheBox to gh-pages (#694) * New Special - jackInTheBox * copy min.css from master branch * fixed the issue of overflow scroll (#740) for more see this issue https://github.com/daneden/animate.css/issues/739 * Adds heartBeat animation demo (#893) * Update animate.min.css to latest version * Updated CSS for current browsers * Updated animate.css * Removed useless test folder * Added warn about prefers-reduced-motion * Adds docs compiler * Adds new base template * Improves the docs compiler * Fixes flipOutY animation * Updates docs template and build * Reorder docs sections * Updates docs animation list template * Updates prettier ignore * Adds syntax highlight to docs * Small fixes to docs content * Updates templates HTML * Styles the demo website * Adds functionality to demo website * Fixes small website demo issue with medium screens * Adds copy animation to demo site * Renames loop classes to repeat * Small adjusts to docs styles * Updates docs template * Updates docs improving copy and adding sections * Reviews the docs copy * Fix some issues with demo-site * Fixes issue with the demo-site playground * Adjusts tooltip on demo-site * Fix layout issues on mobile and update “close” button for animations list Co-authored-by: Daniel Eden <dan.eden@me.com> Co-authored-by: Matt Willis <contact@mrwillis.net> Co-authored-by: Gabrielmtn <Gabrielmtn@gmail.com> Co-authored-by: Indy Prieto <proforced@gmail.com> Co-authored-by: Robert Pemberton <hellorobertp@gmail.com> Co-authored-by: Khaled nuur <kahalidnuur@gmail.com> Co-authored-by: Vladimir Jovanović <vladimir.jovanovic993@gmail.com> * Updates docs folders * Fix some small documentation issues * Updates edit on github link Co-authored-by: Arda Gedik <arnoldsivastanegezer@hotmail.com> Co-authored-by: Arda Gedik <ardagedikk@hotmail.com> Co-authored-by: Jabran Rafique <jabran.rafique@ratedpeople.com> Co-authored-by: Waren Gonzaga <waren.gonzaga.dev@gmail.com> Co-authored-by: Jabran Rafique⚡️ <jabranr@users.noreply.github.com> Co-authored-by: Vaibhav Tandon <vaibhav.tandongcet@gmail.com> Co-authored-by: Waren Gonzaga <warengonzaga.dev@gmail.com> Co-authored-by: Melek REBAI <melek.rebai89@gmail.com> Co-authored-by: Christian Oliff <christianoliff@yahoo.com> Co-authored-by: Daniel Eden <dan.eden@me.com> Co-authored-by: Lucas Ferreira Lima <lucasferreiralimax@gmail.com> Co-authored-by: Matt Willis <contact@mrwillis.net> Co-authored-by: Gabrielmtn <Gabrielmtn@gmail.com> Co-authored-by: Indy Prieto <proforced@gmail.com> Co-authored-by: Robert Pemberton <hellorobertp@gmail.com> Co-authored-by: Khaled nuur <kahalidnuur@gmail.com> Co-authored-by: Vladimir Jovanović <vladimir.jovanovic993@gmail.com>
2020-05-07 17:42:33 +02:00
}
/* Only this element will take half the time to finish */
.my-element {
--animate-duration: 0.5s;
v4 release (#1050) * New animations added * Update * Update * Update * Update * kill bower * Turn off animations for print media query (#856) * Add a feature to turn off animations for printing as requested. * Add print media type * Update the builds * Moved away from gulp to npx + postcss This PR changes the build system for a simpler one, using only npx as runner and postcss to process all the files. * Solves #618 * Solves #836 * Also solves #758 just for fun ;P * Updated travis and removed animate-config.json * Removed strayed gulpfile and trimmed the header * Moved prefix config to package.json and updated the tasks * Updated travis * Updated dependencies and postcss config * Now using CSS custom properties * Add css module file - solves #933 * Updated README for the new build * Rebulit files * Updated dependencies + added browserlist * Fixed small typo on README * Added imports to Back animations * Added FadeInTopLeft.css file Fade in the animation diagonally * Added fadeInTopRight.css file Fade in the animation diagonally * Added fadeInBottomLeft.css * Added fadeInBottomRight.css * Added fadeOutTopLeft.css * Added fadeOutTopRight.css * Added fadeOutBottomRight.css * Added fadeOutBottomLeft.css * Added imports to diagonal fadings * Aditional formatting * Added diagonal fadings to README * Fixes #966 * Animate.css v4 Updates (#1029) * Update to v4 * Add Iteration-Count CSS utility classes solves #998 * Updated builds * Update lightSpeed animations * Update builds * Fix Invalid CSS Media Query Syntax * Update build * Add gitpod support * Add newline in gitpod file * Update README * Revert * Declare variable * Update builds * Remove Gitpod support Co-authored-by: Waren Gonzaga <warengonzaga.dev@gmail.com> * Improves building process and package.json tidy up * Improved animations (#901) * Improved bounce * Improved pulse * Improved bounceInDown * Improved bounceInLeft * Improved bounceInRight * Improved bounceInUp * Improved bounceOutDown * Improved bounceOuLeft * Improved bounceOuRight * Improved bounceOutRight * Improved fadeInDown * Improved fadeInDownBig * Improved fadeInLeft * Improved fadeInLeftBig * Improved fadeInRightBig * Improved fadeInUp * Improved fadeInUpBig * Improved fadeInRight * Reverted fade animations * Compiled * Updated prefers-reduced-motion support on README * Add .delay-1s (#982) The .delay-1s is missing from the readme * HTTPS relevant links on README (#972) prevents HTTP redirects * Create CONTRIBUTING.md (#1033) Co-authored-by: Melek REBAI <melek.rebai89@gmail.com> Co-authored-by: Christian Oliff <christianoliff@yahoo.com> Co-authored-by: Daniel Eden <dan.eden@me.com> * Updates dependencies * Updates prettier config * refactory transform-origin in styles * animation shake with X and Y options :hammer: * Adds shakeX and shakeY to the build * Set 0 Opacity to Out animation classes (#1043) * Update issue templates * Add 0 opacity to out classes * Update builds * Improved implemenation * Update builds * Update current readme * Update builds Co-authored-by: Elton Mesquita <callmeelton@gmail.com> Co-authored-by: Waren Gonzaga <warengonzaga.dev@gmail.com> * Removes prefix from att selector * Feature/new demo site (#1046) * Simplify & centralize the Animate.css home page. Finally. * Design tweak * Fix Lightspeed demos * Fix Lightspeed demos (cont.) * Trigger animation on change as well as click * Correct jQuery example. Fixes #127 * Remove Readme on gh-pages to prevent mistakes like ee75b81 * Use animate.min.css because whatever * Update demo page with MS animation JS hooks. * Updating home page with rubberBand animation. * Reverse hue animation Red-orange-brown isn’t a great first impression. * Add readme, use cssmin minified CSS instead of csso * Update gh-pages * Remove protocol from urls Fixes Chrome’s SSL issue * Remove Square Cash link Donations are weird, and only US account holders could use this. * Updating Gh-page animate.css to the current version This is a simple commit, bringing animate.css up to date with the current master version. * Updating Gh-page animate.min.css to reflect the current version This is a simply update to the Animate.min.css file, to reflect the current version * Update CSS * Updating Gh-page index.html to the reflect the addition of zooms (in out down etc) This adds the optgroup "zoom", and associated options of: ZoomIn, zoomOut, zoomInDown, zoomInUp, zoomInLeft, zoomInRight, zoomOutLeft, zoomOutRight, zoomOutUp, and zoomOutDown. * refactoring index.html to mimic the current optgroup styling I added zooms, which were absent, but added them in a way that didn't reflect the current optgroup styling and delineation. I fixed that and now exits and entrances are grouped appropriately. * updated index.html to reflect the standard optgroup styling on sliders, added slideInDown In addition to adding slider keyframes that were missing, I placed them into the appropriate optgroups to mimic the similar styling of the other animations. * Merging updated version of animate.min.css As requested, this is the updated version of animate.min.css that @daneden request I include in the pull request. * Updated animate.min.css Made it the new version * added jello to options * Update CSS * Add jackInTheBox to gh-pages (#694) * New Special - jackInTheBox * copy min.css from master branch * fixed the issue of overflow scroll (#740) for more see this issue https://github.com/daneden/animate.css/issues/739 * Adds heartBeat animation demo (#893) * Update animate.min.css to latest version * Updated CSS for current browsers * Updated animate.css * Removed useless test folder * Added warn about prefers-reduced-motion * Adds docs compiler * Adds new base template * Improves the docs compiler * Fixes flipOutY animation * Updates docs template and build * Reorder docs sections * Updates docs animation list template * Updates prettier ignore * Adds syntax highlight to docs * Small fixes to docs content * Updates templates HTML * Styles the demo website * Adds functionality to demo website * Fixes small website demo issue with medium screens * Adds copy animation to demo site * Renames loop classes to repeat * Small adjusts to docs styles * Updates docs template * Updates docs improving copy and adding sections * Reviews the docs copy * Fix some issues with demo-site * Fixes issue with the demo-site playground * Adjusts tooltip on demo-site * Fix layout issues on mobile and update “close” button for animations list Co-authored-by: Daniel Eden <dan.eden@me.com> Co-authored-by: Matt Willis <contact@mrwillis.net> Co-authored-by: Gabrielmtn <Gabrielmtn@gmail.com> Co-authored-by: Indy Prieto <proforced@gmail.com> Co-authored-by: Robert Pemberton <hellorobertp@gmail.com> Co-authored-by: Khaled nuur <kahalidnuur@gmail.com> Co-authored-by: Vladimir Jovanović <vladimir.jovanovic993@gmail.com> * Updates docs folders * Fix some small documentation issues * Updates edit on github link Co-authored-by: Arda Gedik <arnoldsivastanegezer@hotmail.com> Co-authored-by: Arda Gedik <ardagedikk@hotmail.com> Co-authored-by: Jabran Rafique <jabran.rafique@ratedpeople.com> Co-authored-by: Waren Gonzaga <waren.gonzaga.dev@gmail.com> Co-authored-by: Jabran Rafique⚡️ <jabranr@users.noreply.github.com> Co-authored-by: Vaibhav Tandon <vaibhav.tandongcet@gmail.com> Co-authored-by: Waren Gonzaga <warengonzaga.dev@gmail.com> Co-authored-by: Melek REBAI <melek.rebai89@gmail.com> Co-authored-by: Christian Oliff <christianoliff@yahoo.com> Co-authored-by: Daniel Eden <dan.eden@me.com> Co-authored-by: Lucas Ferreira Lima <lucasferreiralimax@gmail.com> Co-authored-by: Matt Willis <contact@mrwillis.net> Co-authored-by: Gabrielmtn <Gabrielmtn@gmail.com> Co-authored-by: Indy Prieto <proforced@gmail.com> Co-authored-by: Robert Pemberton <hellorobertp@gmail.com> Co-authored-by: Khaled nuur <kahalidnuur@gmail.com> Co-authored-by: Vladimir Jovanović <vladimir.jovanovic993@gmail.com>
2020-05-07 17:42:33 +02:00
}
```
Notice that some animations have a duration of less than 1 second. As we used the CSS `calc()` function, setting the duration through the `--animation-duration` property will respect these ratios. So, when you change the global duration all the animations will respond to that change!
### Repeating classes
You can control the iteration count of the animation by adding these classes, like below:
```html
<div class="animate__animated animate__bounce animate__repeat-2">Example</div>
```
| Class Name | Default iteration count |
| ------------------- | ----------------------- |
| `animate__repeat-1` | `1` |
| `animate__repeat-2` | `2` |
| `animate__repeat-3` | `3` |
| `animate__infinite` | `infinite` |
v4 release (#1050) * New animations added * Update * Update * Update * Update * kill bower * Turn off animations for print media query (#856) * Add a feature to turn off animations for printing as requested. * Add print media type * Update the builds * Moved away from gulp to npx + postcss This PR changes the build system for a simpler one, using only npx as runner and postcss to process all the files. * Solves #618 * Solves #836 * Also solves #758 just for fun ;P * Updated travis and removed animate-config.json * Removed strayed gulpfile and trimmed the header * Moved prefix config to package.json and updated the tasks * Updated travis * Updated dependencies and postcss config * Now using CSS custom properties * Add css module file - solves #933 * Updated README for the new build * Rebulit files * Updated dependencies + added browserlist * Fixed small typo on README * Added imports to Back animations * Added FadeInTopLeft.css file Fade in the animation diagonally * Added fadeInTopRight.css file Fade in the animation diagonally * Added fadeInBottomLeft.css * Added fadeInBottomRight.css * Added fadeOutTopLeft.css * Added fadeOutTopRight.css * Added fadeOutBottomRight.css * Added fadeOutBottomLeft.css * Added imports to diagonal fadings * Aditional formatting * Added diagonal fadings to README * Fixes #966 * Animate.css v4 Updates (#1029) * Update to v4 * Add Iteration-Count CSS utility classes solves #998 * Updated builds * Update lightSpeed animations * Update builds * Fix Invalid CSS Media Query Syntax * Update build * Add gitpod support * Add newline in gitpod file * Update README * Revert * Declare variable * Update builds * Remove Gitpod support Co-authored-by: Waren Gonzaga <warengonzaga.dev@gmail.com> * Improves building process and package.json tidy up * Improved animations (#901) * Improved bounce * Improved pulse * Improved bounceInDown * Improved bounceInLeft * Improved bounceInRight * Improved bounceInUp * Improved bounceOutDown * Improved bounceOuLeft * Improved bounceOuRight * Improved bounceOutRight * Improved fadeInDown * Improved fadeInDownBig * Improved fadeInLeft * Improved fadeInLeftBig * Improved fadeInRightBig * Improved fadeInUp * Improved fadeInUpBig * Improved fadeInRight * Reverted fade animations * Compiled * Updated prefers-reduced-motion support on README * Add .delay-1s (#982) The .delay-1s is missing from the readme * HTTPS relevant links on README (#972) prevents HTTP redirects * Create CONTRIBUTING.md (#1033) Co-authored-by: Melek REBAI <melek.rebai89@gmail.com> Co-authored-by: Christian Oliff <christianoliff@yahoo.com> Co-authored-by: Daniel Eden <dan.eden@me.com> * Updates dependencies * Updates prettier config * refactory transform-origin in styles * animation shake with X and Y options :hammer: * Adds shakeX and shakeY to the build * Set 0 Opacity to Out animation classes (#1043) * Update issue templates * Add 0 opacity to out classes * Update builds * Improved implemenation * Update builds * Update current readme * Update builds Co-authored-by: Elton Mesquita <callmeelton@gmail.com> Co-authored-by: Waren Gonzaga <warengonzaga.dev@gmail.com> * Removes prefix from att selector * Feature/new demo site (#1046) * Simplify & centralize the Animate.css home page. Finally. * Design tweak * Fix Lightspeed demos * Fix Lightspeed demos (cont.) * Trigger animation on change as well as click * Correct jQuery example. Fixes #127 * Remove Readme on gh-pages to prevent mistakes like ee75b81 * Use animate.min.css because whatever * Update demo page with MS animation JS hooks. * Updating home page with rubberBand animation. * Reverse hue animation Red-orange-brown isn’t a great first impression. * Add readme, use cssmin minified CSS instead of csso * Update gh-pages * Remove protocol from urls Fixes Chrome’s SSL issue * Remove Square Cash link Donations are weird, and only US account holders could use this. * Updating Gh-page animate.css to the current version This is a simple commit, bringing animate.css up to date with the current master version. * Updating Gh-page animate.min.css to reflect the current version This is a simply update to the Animate.min.css file, to reflect the current version * Update CSS * Updating Gh-page index.html to the reflect the addition of zooms (in out down etc) This adds the optgroup "zoom", and associated options of: ZoomIn, zoomOut, zoomInDown, zoomInUp, zoomInLeft, zoomInRight, zoomOutLeft, zoomOutRight, zoomOutUp, and zoomOutDown. * refactoring index.html to mimic the current optgroup styling I added zooms, which were absent, but added them in a way that didn't reflect the current optgroup styling and delineation. I fixed that and now exits and entrances are grouped appropriately. * updated index.html to reflect the standard optgroup styling on sliders, added slideInDown In addition to adding slider keyframes that were missing, I placed them into the appropriate optgroups to mimic the similar styling of the other animations. * Merging updated version of animate.min.css As requested, this is the updated version of animate.min.css that @daneden request I include in the pull request. * Updated animate.min.css Made it the new version * added jello to options * Update CSS * Add jackInTheBox to gh-pages (#694) * New Special - jackInTheBox * copy min.css from master branch * fixed the issue of overflow scroll (#740) for more see this issue https://github.com/daneden/animate.css/issues/739 * Adds heartBeat animation demo (#893) * Update animate.min.css to latest version * Updated CSS for current browsers * Updated animate.css * Removed useless test folder * Added warn about prefers-reduced-motion * Adds docs compiler * Adds new base template * Improves the docs compiler * Fixes flipOutY animation * Updates docs template and build * Reorder docs sections * Updates docs animation list template * Updates prettier ignore * Adds syntax highlight to docs * Small fixes to docs content * Updates templates HTML * Styles the demo website * Adds functionality to demo website * Fixes small website demo issue with medium screens * Adds copy animation to demo site * Renames loop classes to repeat * Small adjusts to docs styles * Updates docs template * Updates docs improving copy and adding sections * Reviews the docs copy * Fix some issues with demo-site * Fixes issue with the demo-site playground * Adjusts tooltip on demo-site * Fix layout issues on mobile and update “close” button for animations list Co-authored-by: Daniel Eden <dan.eden@me.com> Co-authored-by: Matt Willis <contact@mrwillis.net> Co-authored-by: Gabrielmtn <Gabrielmtn@gmail.com> Co-authored-by: Indy Prieto <proforced@gmail.com> Co-authored-by: Robert Pemberton <hellorobertp@gmail.com> Co-authored-by: Khaled nuur <kahalidnuur@gmail.com> Co-authored-by: Vladimir Jovanović <vladimir.jovanovic993@gmail.com> * Updates docs folders * Fix some small documentation issues * Updates edit on github link Co-authored-by: Arda Gedik <arnoldsivastanegezer@hotmail.com> Co-authored-by: Arda Gedik <ardagedikk@hotmail.com> Co-authored-by: Jabran Rafique <jabran.rafique@ratedpeople.com> Co-authored-by: Waren Gonzaga <waren.gonzaga.dev@gmail.com> Co-authored-by: Jabran Rafique⚡️ <jabranr@users.noreply.github.com> Co-authored-by: Vaibhav Tandon <vaibhav.tandongcet@gmail.com> Co-authored-by: Waren Gonzaga <warengonzaga.dev@gmail.com> Co-authored-by: Melek REBAI <melek.rebai89@gmail.com> Co-authored-by: Christian Oliff <christianoliff@yahoo.com> Co-authored-by: Daniel Eden <dan.eden@me.com> Co-authored-by: Lucas Ferreira Lima <lucasferreiralimax@gmail.com> Co-authored-by: Matt Willis <contact@mrwillis.net> Co-authored-by: Gabrielmtn <Gabrielmtn@gmail.com> Co-authored-by: Indy Prieto <proforced@gmail.com> Co-authored-by: Robert Pemberton <hellorobertp@gmail.com> Co-authored-by: Khaled nuur <kahalidnuur@gmail.com> Co-authored-by: Vladimir Jovanović <vladimir.jovanovic993@gmail.com>
2020-05-07 17:42:33 +02:00
As with the delay and speed classes, the `animate__repeat` class is based on the `--animate-repeat` property and has a default iteration count of `1`. You can customize them by setting the `--animate-repeat` property to a longer or a shorter value:
v4 release (#1050) * New animations added * Update * Update * Update * Update * kill bower * Turn off animations for print media query (#856) * Add a feature to turn off animations for printing as requested. * Add print media type * Update the builds * Moved away from gulp to npx + postcss This PR changes the build system for a simpler one, using only npx as runner and postcss to process all the files. * Solves #618 * Solves #836 * Also solves #758 just for fun ;P * Updated travis and removed animate-config.json * Removed strayed gulpfile and trimmed the header * Moved prefix config to package.json and updated the tasks * Updated travis * Updated dependencies and postcss config * Now using CSS custom properties * Add css module file - solves #933 * Updated README for the new build * Rebulit files * Updated dependencies + added browserlist * Fixed small typo on README * Added imports to Back animations * Added FadeInTopLeft.css file Fade in the animation diagonally * Added fadeInTopRight.css file Fade in the animation diagonally * Added fadeInBottomLeft.css * Added fadeInBottomRight.css * Added fadeOutTopLeft.css * Added fadeOutTopRight.css * Added fadeOutBottomRight.css * Added fadeOutBottomLeft.css * Added imports to diagonal fadings * Aditional formatting * Added diagonal fadings to README * Fixes #966 * Animate.css v4 Updates (#1029) * Update to v4 * Add Iteration-Count CSS utility classes solves #998 * Updated builds * Update lightSpeed animations * Update builds * Fix Invalid CSS Media Query Syntax * Update build * Add gitpod support * Add newline in gitpod file * Update README * Revert * Declare variable * Update builds * Remove Gitpod support Co-authored-by: Waren Gonzaga <warengonzaga.dev@gmail.com> * Improves building process and package.json tidy up * Improved animations (#901) * Improved bounce * Improved pulse * Improved bounceInDown * Improved bounceInLeft * Improved bounceInRight * Improved bounceInUp * Improved bounceOutDown * Improved bounceOuLeft * Improved bounceOuRight * Improved bounceOutRight * Improved fadeInDown * Improved fadeInDownBig * Improved fadeInLeft * Improved fadeInLeftBig * Improved fadeInRightBig * Improved fadeInUp * Improved fadeInUpBig * Improved fadeInRight * Reverted fade animations * Compiled * Updated prefers-reduced-motion support on README * Add .delay-1s (#982) The .delay-1s is missing from the readme * HTTPS relevant links on README (#972) prevents HTTP redirects * Create CONTRIBUTING.md (#1033) Co-authored-by: Melek REBAI <melek.rebai89@gmail.com> Co-authored-by: Christian Oliff <christianoliff@yahoo.com> Co-authored-by: Daniel Eden <dan.eden@me.com> * Updates dependencies * Updates prettier config * refactory transform-origin in styles * animation shake with X and Y options :hammer: * Adds shakeX and shakeY to the build * Set 0 Opacity to Out animation classes (#1043) * Update issue templates * Add 0 opacity to out classes * Update builds * Improved implemenation * Update builds * Update current readme * Update builds Co-authored-by: Elton Mesquita <callmeelton@gmail.com> Co-authored-by: Waren Gonzaga <warengonzaga.dev@gmail.com> * Removes prefix from att selector * Feature/new demo site (#1046) * Simplify & centralize the Animate.css home page. Finally. * Design tweak * Fix Lightspeed demos * Fix Lightspeed demos (cont.) * Trigger animation on change as well as click * Correct jQuery example. Fixes #127 * Remove Readme on gh-pages to prevent mistakes like ee75b81 * Use animate.min.css because whatever * Update demo page with MS animation JS hooks. * Updating home page with rubberBand animation. * Reverse hue animation Red-orange-brown isn’t a great first impression. * Add readme, use cssmin minified CSS instead of csso * Update gh-pages * Remove protocol from urls Fixes Chrome’s SSL issue * Remove Square Cash link Donations are weird, and only US account holders could use this. * Updating Gh-page animate.css to the current version This is a simple commit, bringing animate.css up to date with the current master version. * Updating Gh-page animate.min.css to reflect the current version This is a simply update to the Animate.min.css file, to reflect the current version * Update CSS * Updating Gh-page index.html to the reflect the addition of zooms (in out down etc) This adds the optgroup "zoom", and associated options of: ZoomIn, zoomOut, zoomInDown, zoomInUp, zoomInLeft, zoomInRight, zoomOutLeft, zoomOutRight, zoomOutUp, and zoomOutDown. * refactoring index.html to mimic the current optgroup styling I added zooms, which were absent, but added them in a way that didn't reflect the current optgroup styling and delineation. I fixed that and now exits and entrances are grouped appropriately. * updated index.html to reflect the standard optgroup styling on sliders, added slideInDown In addition to adding slider keyframes that were missing, I placed them into the appropriate optgroups to mimic the similar styling of the other animations. * Merging updated version of animate.min.css As requested, this is the updated version of animate.min.css that @daneden request I include in the pull request. * Updated animate.min.css Made it the new version * added jello to options * Update CSS * Add jackInTheBox to gh-pages (#694) * New Special - jackInTheBox * copy min.css from master branch * fixed the issue of overflow scroll (#740) for more see this issue https://github.com/daneden/animate.css/issues/739 * Adds heartBeat animation demo (#893) * Update animate.min.css to latest version * Updated CSS for current browsers * Updated animate.css * Removed useless test folder * Added warn about prefers-reduced-motion * Adds docs compiler * Adds new base template * Improves the docs compiler * Fixes flipOutY animation * Updates docs template and build * Reorder docs sections * Updates docs animation list template * Updates prettier ignore * Adds syntax highlight to docs * Small fixes to docs content * Updates templates HTML * Styles the demo website * Adds functionality to demo website * Fixes small website demo issue with medium screens * Adds copy animation to demo site * Renames loop classes to repeat * Small adjusts to docs styles * Updates docs template * Updates docs improving copy and adding sections * Reviews the docs copy * Fix some issues with demo-site * Fixes issue with the demo-site playground * Adjusts tooltip on demo-site * Fix layout issues on mobile and update “close” button for animations list Co-authored-by: Daniel Eden <dan.eden@me.com> Co-authored-by: Matt Willis <contact@mrwillis.net> Co-authored-by: Gabrielmtn <Gabrielmtn@gmail.com> Co-authored-by: Indy Prieto <proforced@gmail.com> Co-authored-by: Robert Pemberton <hellorobertp@gmail.com> Co-authored-by: Khaled nuur <kahalidnuur@gmail.com> Co-authored-by: Vladimir Jovanović <vladimir.jovanovic993@gmail.com> * Updates docs folders * Fix some small documentation issues * Updates edit on github link Co-authored-by: Arda Gedik <arnoldsivastanegezer@hotmail.com> Co-authored-by: Arda Gedik <ardagedikk@hotmail.com> Co-authored-by: Jabran Rafique <jabran.rafique@ratedpeople.com> Co-authored-by: Waren Gonzaga <waren.gonzaga.dev@gmail.com> Co-authored-by: Jabran Rafique⚡️ <jabranr@users.noreply.github.com> Co-authored-by: Vaibhav Tandon <vaibhav.tandongcet@gmail.com> Co-authored-by: Waren Gonzaga <warengonzaga.dev@gmail.com> Co-authored-by: Melek REBAI <melek.rebai89@gmail.com> Co-authored-by: Christian Oliff <christianoliff@yahoo.com> Co-authored-by: Daniel Eden <dan.eden@me.com> Co-authored-by: Lucas Ferreira Lima <lucasferreiralimax@gmail.com> Co-authored-by: Matt Willis <contact@mrwillis.net> Co-authored-by: Gabrielmtn <Gabrielmtn@gmail.com> Co-authored-by: Indy Prieto <proforced@gmail.com> Co-authored-by: Robert Pemberton <hellorobertp@gmail.com> Co-authored-by: Khaled nuur <kahalidnuur@gmail.com> Co-authored-by: Vladimir Jovanović <vladimir.jovanovic993@gmail.com>
2020-05-07 17:42:33 +02:00
```css
/* The element will repeat the animation 2x
It's better to set this property locally and not globally or
v4 release (#1050) * New animations added * Update * Update * Update * Update * kill bower * Turn off animations for print media query (#856) * Add a feature to turn off animations for printing as requested. * Add print media type * Update the builds * Moved away from gulp to npx + postcss This PR changes the build system for a simpler one, using only npx as runner and postcss to process all the files. * Solves #618 * Solves #836 * Also solves #758 just for fun ;P * Updated travis and removed animate-config.json * Removed strayed gulpfile and trimmed the header * Moved prefix config to package.json and updated the tasks * Updated travis * Updated dependencies and postcss config * Now using CSS custom properties * Add css module file - solves #933 * Updated README for the new build * Rebulit files * Updated dependencies + added browserlist * Fixed small typo on README * Added imports to Back animations * Added FadeInTopLeft.css file Fade in the animation diagonally * Added fadeInTopRight.css file Fade in the animation diagonally * Added fadeInBottomLeft.css * Added fadeInBottomRight.css * Added fadeOutTopLeft.css * Added fadeOutTopRight.css * Added fadeOutBottomRight.css * Added fadeOutBottomLeft.css * Added imports to diagonal fadings * Aditional formatting * Added diagonal fadings to README * Fixes #966 * Animate.css v4 Updates (#1029) * Update to v4 * Add Iteration-Count CSS utility classes solves #998 * Updated builds * Update lightSpeed animations * Update builds * Fix Invalid CSS Media Query Syntax * Update build * Add gitpod support * Add newline in gitpod file * Update README * Revert * Declare variable * Update builds * Remove Gitpod support Co-authored-by: Waren Gonzaga <warengonzaga.dev@gmail.com> * Improves building process and package.json tidy up * Improved animations (#901) * Improved bounce * Improved pulse * Improved bounceInDown * Improved bounceInLeft * Improved bounceInRight * Improved bounceInUp * Improved bounceOutDown * Improved bounceOuLeft * Improved bounceOuRight * Improved bounceOutRight * Improved fadeInDown * Improved fadeInDownBig * Improved fadeInLeft * Improved fadeInLeftBig * Improved fadeInRightBig * Improved fadeInUp * Improved fadeInUpBig * Improved fadeInRight * Reverted fade animations * Compiled * Updated prefers-reduced-motion support on README * Add .delay-1s (#982) The .delay-1s is missing from the readme * HTTPS relevant links on README (#972) prevents HTTP redirects * Create CONTRIBUTING.md (#1033) Co-authored-by: Melek REBAI <melek.rebai89@gmail.com> Co-authored-by: Christian Oliff <christianoliff@yahoo.com> Co-authored-by: Daniel Eden <dan.eden@me.com> * Updates dependencies * Updates prettier config * refactory transform-origin in styles * animation shake with X and Y options :hammer: * Adds shakeX and shakeY to the build * Set 0 Opacity to Out animation classes (#1043) * Update issue templates * Add 0 opacity to out classes * Update builds * Improved implemenation * Update builds * Update current readme * Update builds Co-authored-by: Elton Mesquita <callmeelton@gmail.com> Co-authored-by: Waren Gonzaga <warengonzaga.dev@gmail.com> * Removes prefix from att selector * Feature/new demo site (#1046) * Simplify & centralize the Animate.css home page. Finally. * Design tweak * Fix Lightspeed demos * Fix Lightspeed demos (cont.) * Trigger animation on change as well as click * Correct jQuery example. Fixes #127 * Remove Readme on gh-pages to prevent mistakes like ee75b81 * Use animate.min.css because whatever * Update demo page with MS animation JS hooks. * Updating home page with rubberBand animation. * Reverse hue animation Red-orange-brown isn’t a great first impression. * Add readme, use cssmin minified CSS instead of csso * Update gh-pages * Remove protocol from urls Fixes Chrome’s SSL issue * Remove Square Cash link Donations are weird, and only US account holders could use this. * Updating Gh-page animate.css to the current version This is a simple commit, bringing animate.css up to date with the current master version. * Updating Gh-page animate.min.css to reflect the current version This is a simply update to the Animate.min.css file, to reflect the current version * Update CSS * Updating Gh-page index.html to the reflect the addition of zooms (in out down etc) This adds the optgroup "zoom", and associated options of: ZoomIn, zoomOut, zoomInDown, zoomInUp, zoomInLeft, zoomInRight, zoomOutLeft, zoomOutRight, zoomOutUp, and zoomOutDown. * refactoring index.html to mimic the current optgroup styling I added zooms, which were absent, but added them in a way that didn't reflect the current optgroup styling and delineation. I fixed that and now exits and entrances are grouped appropriately. * updated index.html to reflect the standard optgroup styling on sliders, added slideInDown In addition to adding slider keyframes that were missing, I placed them into the appropriate optgroups to mimic the similar styling of the other animations. * Merging updated version of animate.min.css As requested, this is the updated version of animate.min.css that @daneden request I include in the pull request. * Updated animate.min.css Made it the new version * added jello to options * Update CSS * Add jackInTheBox to gh-pages (#694) * New Special - jackInTheBox * copy min.css from master branch * fixed the issue of overflow scroll (#740) for more see this issue https://github.com/daneden/animate.css/issues/739 * Adds heartBeat animation demo (#893) * Update animate.min.css to latest version * Updated CSS for current browsers * Updated animate.css * Removed useless test folder * Added warn about prefers-reduced-motion * Adds docs compiler * Adds new base template * Improves the docs compiler * Fixes flipOutY animation * Updates docs template and build * Reorder docs sections * Updates docs animation list template * Updates prettier ignore * Adds syntax highlight to docs * Small fixes to docs content * Updates templates HTML * Styles the demo website * Adds functionality to demo website * Fixes small website demo issue with medium screens * Adds copy animation to demo site * Renames loop classes to repeat * Small adjusts to docs styles * Updates docs template * Updates docs improving copy and adding sections * Reviews the docs copy * Fix some issues with demo-site * Fixes issue with the demo-site playground * Adjusts tooltip on demo-site * Fix layout issues on mobile and update “close” button for animations list Co-authored-by: Daniel Eden <dan.eden@me.com> Co-authored-by: Matt Willis <contact@mrwillis.net> Co-authored-by: Gabrielmtn <Gabrielmtn@gmail.com> Co-authored-by: Indy Prieto <proforced@gmail.com> Co-authored-by: Robert Pemberton <hellorobertp@gmail.com> Co-authored-by: Khaled nuur <kahalidnuur@gmail.com> Co-authored-by: Vladimir Jovanović <vladimir.jovanovic993@gmail.com> * Updates docs folders * Fix some small documentation issues * Updates edit on github link Co-authored-by: Arda Gedik <arnoldsivastanegezer@hotmail.com> Co-authored-by: Arda Gedik <ardagedikk@hotmail.com> Co-authored-by: Jabran Rafique <jabran.rafique@ratedpeople.com> Co-authored-by: Waren Gonzaga <waren.gonzaga.dev@gmail.com> Co-authored-by: Jabran Rafique⚡️ <jabranr@users.noreply.github.com> Co-authored-by: Vaibhav Tandon <vaibhav.tandongcet@gmail.com> Co-authored-by: Waren Gonzaga <warengonzaga.dev@gmail.com> Co-authored-by: Melek REBAI <melek.rebai89@gmail.com> Co-authored-by: Christian Oliff <christianoliff@yahoo.com> Co-authored-by: Daniel Eden <dan.eden@me.com> Co-authored-by: Lucas Ferreira Lima <lucasferreiralimax@gmail.com> Co-authored-by: Matt Willis <contact@mrwillis.net> Co-authored-by: Gabrielmtn <Gabrielmtn@gmail.com> Co-authored-by: Indy Prieto <proforced@gmail.com> Co-authored-by: Robert Pemberton <hellorobertp@gmail.com> Co-authored-by: Khaled nuur <kahalidnuur@gmail.com> Co-authored-by: Vladimir Jovanović <vladimir.jovanovic993@gmail.com>
2020-05-07 17:42:33 +02:00
you might end up with a messy situation */
.my-element {
--animate-repeat: 2;
v4 release (#1050) * New animations added * Update * Update * Update * Update * kill bower * Turn off animations for print media query (#856) * Add a feature to turn off animations for printing as requested. * Add print media type * Update the builds * Moved away from gulp to npx + postcss This PR changes the build system for a simpler one, using only npx as runner and postcss to process all the files. * Solves #618 * Solves #836 * Also solves #758 just for fun ;P * Updated travis and removed animate-config.json * Removed strayed gulpfile and trimmed the header * Moved prefix config to package.json and updated the tasks * Updated travis * Updated dependencies and postcss config * Now using CSS custom properties * Add css module file - solves #933 * Updated README for the new build * Rebulit files * Updated dependencies + added browserlist * Fixed small typo on README * Added imports to Back animations * Added FadeInTopLeft.css file Fade in the animation diagonally * Added fadeInTopRight.css file Fade in the animation diagonally * Added fadeInBottomLeft.css * Added fadeInBottomRight.css * Added fadeOutTopLeft.css * Added fadeOutTopRight.css * Added fadeOutBottomRight.css * Added fadeOutBottomLeft.css * Added imports to diagonal fadings * Aditional formatting * Added diagonal fadings to README * Fixes #966 * Animate.css v4 Updates (#1029) * Update to v4 * Add Iteration-Count CSS utility classes solves #998 * Updated builds * Update lightSpeed animations * Update builds * Fix Invalid CSS Media Query Syntax * Update build * Add gitpod support * Add newline in gitpod file * Update README * Revert * Declare variable * Update builds * Remove Gitpod support Co-authored-by: Waren Gonzaga <warengonzaga.dev@gmail.com> * Improves building process and package.json tidy up * Improved animations (#901) * Improved bounce * Improved pulse * Improved bounceInDown * Improved bounceInLeft * Improved bounceInRight * Improved bounceInUp * Improved bounceOutDown * Improved bounceOuLeft * Improved bounceOuRight * Improved bounceOutRight * Improved fadeInDown * Improved fadeInDownBig * Improved fadeInLeft * Improved fadeInLeftBig * Improved fadeInRightBig * Improved fadeInUp * Improved fadeInUpBig * Improved fadeInRight * Reverted fade animations * Compiled * Updated prefers-reduced-motion support on README * Add .delay-1s (#982) The .delay-1s is missing from the readme * HTTPS relevant links on README (#972) prevents HTTP redirects * Create CONTRIBUTING.md (#1033) Co-authored-by: Melek REBAI <melek.rebai89@gmail.com> Co-authored-by: Christian Oliff <christianoliff@yahoo.com> Co-authored-by: Daniel Eden <dan.eden@me.com> * Updates dependencies * Updates prettier config * refactory transform-origin in styles * animation shake with X and Y options :hammer: * Adds shakeX and shakeY to the build * Set 0 Opacity to Out animation classes (#1043) * Update issue templates * Add 0 opacity to out classes * Update builds * Improved implemenation * Update builds * Update current readme * Update builds Co-authored-by: Elton Mesquita <callmeelton@gmail.com> Co-authored-by: Waren Gonzaga <warengonzaga.dev@gmail.com> * Removes prefix from att selector * Feature/new demo site (#1046) * Simplify & centralize the Animate.css home page. Finally. * Design tweak * Fix Lightspeed demos * Fix Lightspeed demos (cont.) * Trigger animation on change as well as click * Correct jQuery example. Fixes #127 * Remove Readme on gh-pages to prevent mistakes like ee75b81 * Use animate.min.css because whatever * Update demo page with MS animation JS hooks. * Updating home page with rubberBand animation. * Reverse hue animation Red-orange-brown isn’t a great first impression. * Add readme, use cssmin minified CSS instead of csso * Update gh-pages * Remove protocol from urls Fixes Chrome’s SSL issue * Remove Square Cash link Donations are weird, and only US account holders could use this. * Updating Gh-page animate.css to the current version This is a simple commit, bringing animate.css up to date with the current master version. * Updating Gh-page animate.min.css to reflect the current version This is a simply update to the Animate.min.css file, to reflect the current version * Update CSS * Updating Gh-page index.html to the reflect the addition of zooms (in out down etc) This adds the optgroup "zoom", and associated options of: ZoomIn, zoomOut, zoomInDown, zoomInUp, zoomInLeft, zoomInRight, zoomOutLeft, zoomOutRight, zoomOutUp, and zoomOutDown. * refactoring index.html to mimic the current optgroup styling I added zooms, which were absent, but added them in a way that didn't reflect the current optgroup styling and delineation. I fixed that and now exits and entrances are grouped appropriately. * updated index.html to reflect the standard optgroup styling on sliders, added slideInDown In addition to adding slider keyframes that were missing, I placed them into the appropriate optgroups to mimic the similar styling of the other animations. * Merging updated version of animate.min.css As requested, this is the updated version of animate.min.css that @daneden request I include in the pull request. * Updated animate.min.css Made it the new version * added jello to options * Update CSS * Add jackInTheBox to gh-pages (#694) * New Special - jackInTheBox * copy min.css from master branch * fixed the issue of overflow scroll (#740) for more see this issue https://github.com/daneden/animate.css/issues/739 * Adds heartBeat animation demo (#893) * Update animate.min.css to latest version * Updated CSS for current browsers * Updated animate.css * Removed useless test folder * Added warn about prefers-reduced-motion * Adds docs compiler * Adds new base template * Improves the docs compiler * Fixes flipOutY animation * Updates docs template and build * Reorder docs sections * Updates docs animation list template * Updates prettier ignore * Adds syntax highlight to docs * Small fixes to docs content * Updates templates HTML * Styles the demo website * Adds functionality to demo website * Fixes small website demo issue with medium screens * Adds copy animation to demo site * Renames loop classes to repeat * Small adjusts to docs styles * Updates docs template * Updates docs improving copy and adding sections * Reviews the docs copy * Fix some issues with demo-site * Fixes issue with the demo-site playground * Adjusts tooltip on demo-site * Fix layout issues on mobile and update “close” button for animations list Co-authored-by: Daniel Eden <dan.eden@me.com> Co-authored-by: Matt Willis <contact@mrwillis.net> Co-authored-by: Gabrielmtn <Gabrielmtn@gmail.com> Co-authored-by: Indy Prieto <proforced@gmail.com> Co-authored-by: Robert Pemberton <hellorobertp@gmail.com> Co-authored-by: Khaled nuur <kahalidnuur@gmail.com> Co-authored-by: Vladimir Jovanović <vladimir.jovanovic993@gmail.com> * Updates docs folders * Fix some small documentation issues * Updates edit on github link Co-authored-by: Arda Gedik <arnoldsivastanegezer@hotmail.com> Co-authored-by: Arda Gedik <ardagedikk@hotmail.com> Co-authored-by: Jabran Rafique <jabran.rafique@ratedpeople.com> Co-authored-by: Waren Gonzaga <waren.gonzaga.dev@gmail.com> Co-authored-by: Jabran Rafique⚡️ <jabranr@users.noreply.github.com> Co-authored-by: Vaibhav Tandon <vaibhav.tandongcet@gmail.com> Co-authored-by: Waren Gonzaga <warengonzaga.dev@gmail.com> Co-authored-by: Melek REBAI <melek.rebai89@gmail.com> Co-authored-by: Christian Oliff <christianoliff@yahoo.com> Co-authored-by: Daniel Eden <dan.eden@me.com> Co-authored-by: Lucas Ferreira Lima <lucasferreiralimax@gmail.com> Co-authored-by: Matt Willis <contact@mrwillis.net> Co-authored-by: Gabrielmtn <Gabrielmtn@gmail.com> Co-authored-by: Indy Prieto <proforced@gmail.com> Co-authored-by: Robert Pemberton <hellorobertp@gmail.com> Co-authored-by: Khaled nuur <kahalidnuur@gmail.com> Co-authored-by: Vladimir Jovanović <vladimir.jovanovic993@gmail.com>
2020-05-07 17:42:33 +02:00
}
```
Notice that `animate__infinite` doesn't use any custom property and changes to `--animate-repeat` will have no effect on it. Don't forget to read the [best practices](#best-practices) section to make the best use of repeating animations.