Detect css transition support with upgrade

Question

I am going to use the css transition and jquery plugin as a backup for browsers that don't support it. I want to use modernizr to detect css transition support. It is too difficult to load the whole library for this, I only want to grab a piece of code, I need to detect a css transition. the modernism download page has many options and additions that confuse me. My question is, what options should I choose to effectively detect css transition?

<script type="text/javascript"> // modernizr </script> <script type="text/javascript"> if(!Modernizr.csstransitions) { // Use jquery if CSS transitions are not supported } </script> 

Answer 1

Here is the code from the Modernizr library. This is just 1kb.

 ;window.Modernizr=function(a,b,c){function z(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1),d=(a+" "+m.join(c+" ")+c).split(" ");return y(d,b)}function y(a,b){for(var d in a)if(j[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function x(a,b){return!!~(""+a).indexOf(b)}function w(a,b){return typeof a===b}function v(a,b){return u(prefixes.join(a+";")+(b||""))}function u(a){j.cssText=a}var d="2.0.6",e={},f=b.documentElement,g=b.head||b.getElementsByTagName("head")[0],h="modernizr",i=b.createElement(h),j=i.style,k,l=Object.prototype.toString,m="Webkit Moz O ms Khtml".split(" "),n={},o={},p={},q=[],r,s={}.hasOwnProperty,t;!w(s,c)&&!w(s.call,c)?t=function(a,b){return s.call(a,b)}:t=function(a,b){return b in a&&w(a.constructor.prototype[b],c)},n.csstransitions=function(){return z("transitionProperty")};for(var A in n)t(n,A)&&(r=A.toLowerCase(),e[r]=n[A](),q.push((e[r]?"":"no-")+r));u(""),i=k=null,e._version=d,e._domPrefixes=m,e.testProp=function(a){return y([a])},e.testAllProps=z;return e}(this,this.document); 

For example, you can return with the following code and serve jQuery-enabled animations for browsers that do not support CSS3 transitions:

 if (!Modernizr.csstransitions) { $(document).ready(function(){ $(".test").hover(function () { $(this).stop().animate({ color: "#F00" },700) }, function() { $(this).stop().animate({ color: "#AAA" },700)} ); }); } 

Answer 2

CSS Transactions do not exist, I think you are looking for CSS transitions. It is located at the bottom of the CSS3 column.

Answer 3

Just check the CSS transition box. It will automatically mark several fields in the lower right corner, I would leave "Add CSS classes" and "HTML5 Shim / IEPP", since they are very light and useful.