A CSS3 animation framework based on jQuery providing an easy way to develop cross browser CSS3 animations.
For the user, it could be easy to use jQuery method to perform and combine the animations.
For the developer, it could be easy to develop cross browser CSS3 animations by using JavaScript.
Effects
Tile
Integrate with CSS Library
jQuery-animations currently supports IE10+, Chrome, Firefox, Safari and Opera.
Perform CSS3 animations. This method extends from jQuery.animate(), so the options naming follows its.
Sets the animation ID(s) or name(s) you want to perform. It could be a mutiple animations by including each one separated by a space.
Available animations please refer to Effects.
ID means that predined in JavaScript plugins, and name means that declares in CSS.
Sets the animations options.
Sets the number determining how long the animation will run(ms).
Sets the number determining when the animation will start.(ms).
Sets the number determining the number of times an animation is played.
Available values please refer to animation-iteration-count
Sets the easing function to use for the transition.
Available values please refer to animation-timing-function
Sets the property whether or not the animation should play in reverse on alternate cycles.
Available values please refer to animation-direction
Sets the property specifies what styles will apply for the element when the animation is not playing. You can use reset() method to clear the state after forwards or both.
Available values please refer to animation-fill-mode
Sets the flag determining the animation combines with other animations. It will stop running animation when sets false.
Sets the flag determining the animations applies to a new wrapper.
Sets the flag determining the animations applies to a new wrapper when combine other animations automatically. You can disable this flag if the animations are simple without conflicts for better performace. eg. fadeOut and shake can apply in the same element easily, but shake and bounce use the same css property and conflict.
Sets the callback function to call once animations are ready to begin.
Sets the callback function to call once the animation begins..
Sets the callback function to call once the animation is complete.
Sets the callback function to call when the animation fails to complete.
Sets the callback function to call when the animation completes or stops without completing.
Sets the callback function to call when the animation completes or stops without completing. But, if there is any animation running inside target element, it won't trigger untill all done.
Sets the callback function to call when the animation clear or reset triggered.
Sets the callback function to call when the window resize and you can handle your customized animations.
Set customized options for each animation. Defines the same key as animation ID or name in this object. Customized options structure is the same with options of global.
There could be some plugin defined options, eg. strength option in shake animation.
Perform CSS3 inlince animations.
Extends options structure previously, but there must be a option keyframes in this object.
Specifies the keyframes of animation, just like css structure.
Stop CSS3 animations and trigger complete event. This method extends from jQuery.finish()
Stop CSS3 animations and trigger fail event. This method extends from jQuery.stop()
Clear CSS3 keyframe stopped after forwards and both.
Basic usage
$('#want-to-animate').animate('shake');You can also combine multiple animations once
$('#want-to-animate').animate('flyToUp flyToRight fadeOut', {
complete: function(options) {
$('#want-to-animate').remove();
}
});Or combine multiple animations in different time
$('#want-to-animate').animate('shake', {combinable: true});
$('#want-to-animate').animate('fadeOut', {combinable: true});Inline animation
$('#want-to-animate').animate({
keyframes: {
to: {
transform: 'rotate(360deg)'
}
}
});Sometimes you could combine mutiple animations frequent use to a new one.
$.animations['hit'] = { shortcut: 'fadeOut shake bounce' };
// now you can call the new animation 'hit'
$('#want-to-animate').animate('hit');With options
$('#want-to-animate').animate('animation1 animation2', {
// Sets the number determining how long the animation will run(ms).
duration: 400,
// Sets the number determining when the animation will start.(ms).
delay: 0,
// Sets the number determining the number of times an animation is played.
repeat: 1,
// Sets the easing function to use for the transition.
easing: 'ease',
// Sets the property whether or not the animation should play in reverse on alternate cycles.
direction: 'normal',
// Sets the property specifies what styles will apply for the element when the animation is not playing.
fillMode: 'none',
// Sets the flag determining the animation combines with other animations. It will stop running animation when sets false.
combinable: false,
// Sets the flag determining the animations applies to a new wrapper.
wrap: false,
// Sets the flag determining the animations applies to a new wrapper when combine other animations automatically. You can disable this flag if the animations are simple without conflicts for better performace. eg. fadeOut and shake can apply in the same element easily, but shake and bounce use the same css property and conflict.
autoWrap: true,
// Sets the callback function to call once animations are ready to begin.
prepare: function(options) { },
// Sets the callback function to call once the animation begins..
start: function(options) { },
// Sets the callback function to call once the animation is complete.
complete: function(options) { },
// Sets the callback function to call when the animation fails to complete.
fail: function(options) { },
// Sets the callback function to call when the animation completes or stops without completing.
always: function(options) { },
// Sets the callback function to call when the animation clear or reset triggered.
clear: function(options) { },
// Sets the callback function to call when the window resize and you can handle your customized animations.
resize: function(options) {},
// Sets the callback function to call when the animation completes or stops without completing. But, if there is any animation running inside target element, it won't trigger untill all done.
end: function() { },
// Set customized options for each animation. Defines the same key as animation ID or name in this object. Customized options structure is the same with options of global.
custom: {
animation1: {
// specify options for this animation...
duration: 1000
// ...
}
},
// There could be some plugin defined options.
var1: 'something'
// ...
});Coming soon.
The project is released under the MIT license.
The project's website is located at https://github.com/emn178/jquery-animations
Author: emn178@gmail.com