[//]: # 'DO NOT EDIT THIS FILE!'
[//]: # 'This file is auto generated. Edit README.template.md and then use yarn gen'

Animate.web


Animate.css animations ported to Web Animations API.

DEMO and its source code.

Properties in animations keyframes are sorted according to a convention:

First goes offset property (if present), then easing (if present), then composite (if present), then animatable CSS properties in alphabetical order (with exception of cssOffset which is sorted as if it was offset).

Options are sorted alphabetically.

Install

``
$ yarn add animate.web
`

or

`
$ npm install animate.web
`

Usage

Import:

`javascript
import animateweb from 'animate.web'
`

Or load from CDN:

`html

`

If you need only one or several animations it is possible to load them individually via CDN. For example, if you only need bounceIn, flash and flip:

`html



`

When loading from CDN a global variable animateweb is added to the scope. If you load the full bundle animateweb contains all the animations from the package. If individual animations are loaded it contains only them.

Assign a selector to the element(s) you want to animate:

`html



`

Create animation with default options:

`javascript
const animation = document.querySelector('#animation').animate(animateweb['bounceIn'].keyframes, animateweb['bounceIn'].options)
`

Or apply any custom options if you need. Full list of available options here

For example, change duration to 3 seconds and play it infinitely:

`javascript
animateweb['bounceIn'].options.duration = 3000
animateweb['bounceIn'].options.iterations = Infinity
const animation = document.querySelector('#animation').animate(animateweb['bounceIn'].keyframes, animateweb['bounceIn'].options)
`

After being created the animation will play immediately. If you want to prevent this use cancel() method right after the creation:

`javascript
const animation = document.querySelector('#animation').animate(animateweb['bounceIn'].keyframes, animateweb['bounceIn'].options)
animation.cancel()
`

Use all available properties, methods and event handlers of the animation. Full list here

For example, play animation on click:

`html
Play
`

#### Categories

Animations are sorted into categories via animateweb.categories property that allows infinite levels of sub-categories.

animateweb.categories is an object of "key: value" pairs where value can be either true or object itself.

If value === true, then key is the name an animation. If value is an object (not an array) then key is the name of a sub-category. Each sub-category is the same object of "key: value" pairs structure, so they can be infinite.

To view an example of how you can create expandable menu from the categories object search for categories-menu in demo source code. It is written as a recursive Vue component.

Development

Build the bundle for browsers into ./dist folder:

`shell script
yarn build
`

Rebuild the bundle when its source files change on disk:

`shell script
yarn watch
`

Lint:

`shell script
yarn lint
`

Fix linting and style errors:

`shell script
yarn fix
`

Update dependencies:

`shell script
yarn up
`

Generate changelog based on commit messages:

`shell script
yarn c
`

To use the above command conventional-changelog-cli must be installed globally. Follow the recommended workflow.

Testing

`shell script
yarn test
`

Source

Tests check integrity of animations and categories and make sure that all animations keyframes and options contain only allowed attributes.

Here's what is checked:

1. Animation name is a valid filename.
1. Each keyframe of each animation contains only alowed attributes, that is one or more of animatable CSS properties and (optionally) offset, easing, composite.
1. Attributes are sorted according to the convention (see above).
1. offset attribute (if present in a keyframe) is a number between 0 and 1.
1. offset attributes (if present in several keyframes) are in ascending order.
1. easing attribute (if present in a keyframe) is a valid CSS easing-function.
1. composite attribute (if present in a keyframe) is a valid KeyframeEffect.composite operation.
1. Animation's options are valid WAAPI timing properties.
1. Animation's options are in alphabetical order.
1. The first and last keyframes contain all animatable properties used in animation. If they don't you get Uncaught DOMException: Failed to execute 'animate' on 'Element': Partial keyframes are not supported. in Chrome or NotSupportedError: Animation to or from an underlying value is not yet supported.` in Firefox.
Starting from Firefox 75 such cases do not trigger errors anymore. So if other major browsers also implement this feature, this part of the tests will be removed in the future.
1. Every animatable CSS property has a valid value.
1. Categories object (if present) is valid.

An example of passed unit tests:

!image