jQuery Animated DOM Elements with CSS3 Transitions - CSSAnimate
File Size: | 103 KB |
---|---|
Views Total: | 6909 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

jquery.mb.CSSAnimate is a jQuery plugin for animated DOM elements using CSS3 transitions instead of the default jQuery.animate()
method.
It provides a fallback to the default animate method if CSS3 is not supported by the browser.
Basic Usage:
1. Include the latest jQuery library, CSSAnimate, and mb.browser (for feature dection) in the head section of your web page
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/inc/jquery.mbBrowser.min.js"></script> <script src="/path/to/inc/jquery.mb.CSSAnimate.min.js"></script>
2. Apply a custom animation to the element using the CSSAnimate
method.
- opt: A CSS object containing any CSS transitions, transforms, and filters.
- duration: An int for the animation duration in milliseconds
- delay: An int for the animation delay in milliseconds
- ease: ease || linear || ease-in || ease-out || ease-in-out || cubic-bezier(<number>, <number>, <number>, <number>)
- callback: A callback function called once the transition end
// jQuery(this).CSSAnimate(opt, duration, delay, ease, callback) element.CSSAnimate({ top:t, left:l, width:w, height:h, transform: 'rotate(50deg) scale(.8)' }, 2000, 100, "ease-out", callback; })
Changelog:
2020-03-15
- Update
2017-11-30
- various fix
2016-12-17
- various fix
2014-09-24
- better CSS3 interpreter
2014-03-27
- better CSS3 interpreter
2014-02-19
- various fixes.
This awesome jQuery plugin is developed by pupunzi. For more Advanced Usages, please check the demo page or visit the official website.