JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

HTML

<script src="http://addyosmani.com/resources/css3transitions/js/modernizr-1.7.min.js"></script>
<div class="container">     
    <h1>CSS3 Transitions</h1>
    <h4>with a jQuery fallback</h4>
    <div class="bar"><div class="box alt0"></div></div>
    <div class="bar"><div class="box alt1"></div></div>
    <div class="bar"><div class="box alt2"></div></div>
    <div class="notebar compat">CSS3 transitions supported?&nbsp;<span>no</span></div>
    <div class="notebar">Using&nbsp;:&nbsp;blog sample</div>
    <div class="notebar status">Waiting for animations to complete...</div>
</div>


<link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>

CSS

body {
        background-color:#252525;
        margin:0 auto;
        font-family: Arial, Helvetica,sans-serif; 
    }
    
    .container{
        margin:0 auto;
        width:523px;
        padding-top:50px;
    }
    
    h1{
        text-align:center;
        color:#fff;
        font-size:4em;
        font-family: 'Dancing Script', arial, serif;
        text-shadow: 1px 3px 1px #000;
    }
    
    h4{
        text-align:center;
        color:#fff;
        font-size:2em;
        font-family: 'Dancing Script', arial, serif;
        text-shadow: 1px 3px 1px #000;
        margin-top:-20px;
    }
    
    .box {
        width: 10px;
        height: 40px;
        position: relative;

    
        background: -moz-linear-gradient(top, #ffdf0a, #ff830a);
        background: -webkit-gradient(linear, center top, center bottom, from(#ffdf0a), to(#ff830a));
        background: -o-linear-gradient(top, #ffdf0a, #ff830a);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdf0a', endColorstr='#ff830a');
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdf0a', endColorstr='#ff830a')";
        background: linear-gradient(top, #ffdf0a, #ff830a);

         -moz-border-radius: 12px; /* FF1+ */
      -webkit-border-radius: 12px; /* Saf3-4, iOS 1+, Android 1.5+ */
              border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
    

    }
    
    .notebar{
        background-color:#1A1A1A;
        width:480px;
        height:20px;
        position:relative;
        margin:20px;
        text-align:center;
        color:#fff;
        box-shadow: 1px 1px 0 #2F2F2F;
        
         -moz-border-radius: 12px; /* FF1+ */
      -webkit-border-radius: 12px; /* Saf3-4, iOS 1+, Android 1.5+ */
              border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */

        
    }
    
    .compat{
        color:#666;
    }
    
    .bar{
        background-color:#1A1A1A;
        width:480px;
        height:40px;
 ...

JavaScript

$(function(){
    
    function getPrefix( prop ){
        var prefixes = ['Moz','Webkit','Khtml','0','ms'],
            elem     = document.createElement('div'),
            upper      = prop.charAt(0).toUpperCase() + prop.slice(1),
            pref     = "";

        for(var len = prefixes.length; len--;){
            if((prefixes[len] + upper) in elem.style){
                pref = (prefixes[len]);
            }
        }

        if(prop in elem.style){
            pref = (prop);
        }

        return '-' + pref.toLowerCase() + '-';

    }

    function updateStatus(msg){
        $('.status').html(msg);
    }

    function compatTest(){
        if (Modernizr.csstransitions) {
            $('.compat span').html('yes');
        }
    }


  compatTest();

  $.fn.extend({
    defaultAnimate: $.fn.animate,
    animate: function(props, speed, easing, callback) {
                var options = speed && typeof speed === "object" ? jQuery.extend({}, speed) :{
                        complete: callback || !callback && easing ||
                        jQuery.isFunction( speed ) && speed,
                        duration: speed,
                        easing: callback && easing || easing && !jQuery.isFunction(easing) && easing
                    };   
                  return $(this).each(function() {
                    var $this = $(this),
                        altTransition,
                        easing = (options.easing) ? easing : 'ease-in-out',
                        prefix = (getPrefix('transition'));     
                        if (Modernizr.csstransitions) {
                              $this.css(prefix + 'transition', 'all ' + speed / 1000 + 's ease-in-out').css(props);
                              setTimeout(function() {
                                $this.css(prefix + 'transition', altTransition);
                                if ($.isFunction(options.complete)) {
                                     options.complete();
                     ...