jQuery Animated DOM Elements with CSS3 Transitions - CSSAnimate

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:

2025-01-25

• Update

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.