JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://addyosmani.com/resources/css3transitions/js/modernizr-1.7.min.js"></script>
<script src="http://addyosmani.com/resources/css3transitions/js/jquery.transition.js"></script>
<div class="container">     
    <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 destekleniyor mu?&nbsp;<span>Hayır</span></div>
    <div class="notebar status">Animasyonun tamamlanması bekleniyor...</div>
</div>

CSS

body {
        background-color:#252525;
        margin:0 auto;
        font-family: Arial, Helvetica,sans-serif; 
    }
    
    .container{
        margin:0 auto;
        width:523px;
        height:300px;
        padding-top:5px;
    }
    
    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: #FFCC33;
        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{
       ...

JavaScript

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

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

    compatTest();

    $('.alt0').animate({width: '480px'}, 4000, function(){
        updateStatus('Birinci animasyon tamamlandı');
    });

    $('.alt1').animate({width: '480px'}, 5000, function(){
        updateStatus('İkinci animasyon tamamlandı');
    });

    $('.alt2').animate({width: '480px'}, 7000, function(){
        updateStatus('Üçüncü animasyon tamamlandı');
    });

});