Animation
Perform a custom animation of a set of CSS properties.
domQ uses Web Animations which is the latest javascript API for Animations

Parameters

  1. 1.
    keyframes : object / array
  2. 2.
    speed : string / number
  3. 3.
    easing : string
  4. 4.
    callback : function

Animation Settings

any animation related settings Parameters can be passed with inside keyframes

Example

1
domQ( 'p' ).animate({
2
direction: "reverse",
3
iterations: "2"
4
});
Copied!
please refer MDN reference for detailed info on animation settings Parameters
Element.animate() - Web APIs | MDN

Easing

by default animation api runs with browser supported easing which are
  1. 1.
    linear
  2. 2.
    ease
  3. 3.
    ease-in
  4. 4.
    ease-out
  5. 5.
    ease-in-out
You can also pass custom easing value like cubic-bezier(0.42, 0, 0.58, 1)
Please check for custom easing functions
Easing Functions Cheat Sheet

Example

1
domQ( 'p' ).animate( {
2
opacity: [ 0.5, 1 ],
3
transform: [ 'scale(0.5)', 'scale(1)' ],
4
direction: 'alternate', // Setting
5
duration: 500, // Setting : Supported Values [ 'slow', 'fast' ,'default' ]
6
iterations: 20, // Setting
7
}, function( element ) {
8
alert( 'Element Animation is finished' );
9
10
// element variable is actual element object.
11
// you can do what ever you want to do with it.
12
domQ( element ).hide();
13
} );
Copied!

Quick Links

core/animate.js at main · domq-js/core
GitHub
Source File