Animowany suwak - pasek CSS3

Animowany suwak - pasek CSS3

by seefeld

HTML

<div class="wrapper progress">
    <div class="inner inner1 cos"></div>
</div>

<div class="wrapper progress">
    <div class="inner inner2 cos"></div>
</div>

<div class="wrapper progress">
    <div class="inner inner3 cos"></div>
</div>

CSS

body { padding: 15px; background: #ccc;}

.progress{ 
    background-color:#fff;
    border-radius:3px;
    height:16px;
    box-shadow: 0px 1px #fff;
}

.cos {
    background-color: #E5662E !important;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F5763E), to(#CE4F17));
    background-image: -webkit-linear-gradient(top, #F5763E, #CE4F17);
    background-image: linear-gradient(to bottom, #F5763E, #CE4F17);
    background-repeat: repeat-x;
    box-shadow: inset 0 1px 0px #FBA559;
    border-radius: 3px;
    border: 1px solid #BD6C49;
    border-bottom: 1px solid #98350A;

}

div.wrapper {
    display: block;
    width: 500px;
    margin: 5px 0px;

}
div.inner {
    height: 100%;
    width: 70%;
    background: Orange;

}

div.inner1 {
    
}

div.inner2 {

    -webkit-animation: AnimateDiv2 1s forwards;
}

div.inner3 {

    -webkit-animation: AnimateDiv3 1s forwards;
}



@-webkit-keyframes AnimateDiv {
    0%   { width: 0%; }
    100% { width: 40%; }
}

@-webkit-keyframes AnimateDiv2 {
    0%   { width: 0%; }
    100% { width: 95%; }
}

@-webkit-keyframes AnimateDiv3 {
    0%   { width: 0%; }
    100% { width: 55%; }
}

JavaScript

$('.inner1').css( "-webkit-animation", "AnimateDiv 1s forwards");