Animasyon Beceri Barları

Animasyon Beceri Barları

by GMasterTR

HTML

<div class="skiller col">
        <ul id="skill">
            <li><span class="expand html5"> <small>%70</small></span><em>HTML 5</em></li>
            <li><span class="expand css3"> <small>%90</small></span><em>CSS 3</em></li>
            <li><span class="expand jquery"> <small>%50</small></span><em>jQuery</em></li>
            <li><span class="expand photoshop"> <small>%10</small></span><em>Photoshop</em></li>
            <li><span class="expand dreamweaver"> <small>%100</small></span><em>Dreamweaver</em></li>
        </ul>
    </div>

CSS

.skimiler{float: left;margin:-15px auto 0px 0px;width: 330px;}
.skiller {margin: 35px;font-size: 12px;line-height: 2em;position: absolute;}
.col { width:350px;}
#skill {list-style: none outside none;}
#skill li {background:#222222;height: 23px;margin-bottom: 20px;margin-left: -40px;width: 350px;}
#skill li em { position:relative; top:-22px;}
#skill li small { margin-left:10px;}
#skill span { color:#fff; padding-bottom:3px;}
.expand {background:#F60;height: 20px;position: absolute;left: 0;}

.html5       { width:70%;  -moz-animation:html5 2s ease-out;       -webkit-animation:html5 2s ease-out;        }
.css3        { width:90%;  -moz-animation:css3 2s ease-out;        -webkit-animation:css3 2s ease-out;         }
.jquery      { width:50%; -moz-animation: jquery 2s ease-out;   -webkit-animation: jquery 2s ease-out;      }
.photoshop   { width:10%;  -moz-animation:photoshop 2s ease-out;   -webkit-animation:photoshop 2s ease-out;    }
.dreamweaver { width:100%; -moz-animation:dreamweaver 2s ease-out; -webkit-animation:dreamweaver 2s ease-out;  }

@-moz-keyframes html5       { 0%  { width:0px;} 100%{ width:70%;}   }
@-moz-keyframes css3        { 0%  { width:0px;} 100%{ width::90%;}	}
@-moz-keyframes jquery      { 0%  { width:0px;} 100%{ width::50%;}	}
@-moz-keyframes photoshop   { 0%  { width:0px;} 100%{ width::10%;}	}
@-moz-keyframes dreamweaver { 0%  { width:0px;} 100%{ width::100%;}	}

@-webkit-keyframes html5       { 0%  { width:0px;} 100%{ width:70%;}  }
@-webkit-keyframes css3        { 0%  { width:0px;} 100%{ width::90%;} }
@-webkit-keyframes jquery      { 0%  { width:0px;} 100%{ width::50%;} }
@-webkit-keyframes photoshop   { 0%  { width:0px;} 100%{ width::10%;} }
@-webkit-keyframes dreamweaver { 0%  { width:0px;} 100%{ width::100%;} }