jQuery Animated DOM Elements with CSS3 Transitions - CSSAnimate

jQuery Animated DOM Elements with CSS3 Transitions - CSSAnimate
File Size: 103 KB
Views Total: 6390
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

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.