MEMBUAT ANIMATION DELAY

M

Y

I

S

P

U

N

K

R

O

C

K

Hi,FRIENDS,...

GIMANA BINGUNG ??Hehe.. Nih cara Buatnya Cukup Mudah Ko' ? 

Pertama Siapin Gambarnya, Kemudian Upload Di Hostingan Anda . 

Kedua Copy Kode dibawah Ini ?

CSS nya :

#delay_demo{
    position:relative;
    width:500px;
    height:310px;
    margin:0 auto 10px;
    border:1px #aaa solid;
    padding:10px;
    background:#1d2d6b;
    background:-moz-linear-gradient(left,rgba(29,45,107,1) 0,rgba(146,184,209,1) 34%,rgba(29,45,107,1) 100%);
    background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(29,45,107,1)),color-stop(34%,rgba(146,184,209,1)),color-stop(100%,rgba(29,45,107,1)));
    background:-webkit-linear-gradient(left,rgba(29,45,107,1) 0,rgba(146,184,209,1) 34%,rgba(29,45,107,1) 100%);
    background:-o-linear-gradient(left,rgba(29,45,107,1) 0,rgba(146,184,209,1) 34%,rgba(29,45,107,1) 100%);
    background:-ms-linear-gradient(left,rgba(29,45,107,1) 0,rgba(146,184,209,1) 34%,rgba(29,45,107,1) 100%);
    background:linear-gradient(to right,rgba(29,45,107,1) 0,rgba(146,184,209,1) 34%,rgba(29,45,107,1) 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1d2d6b',endColorstr='#1d2d6b',GradientType=1)}
#dd_main{
    width:200px;
    height:80px;
    position:absolute;
    top:82px;left:160px;
    box-shadow:0 2px 2px #000 inset,0 1px 0 #fff;
    -webkit-box-shadow:0 2px 2px #000 inset,0 1px 0 #fff;
    -moz-box-shadow:0 2px 2px #000 inset,0 1px 0 #fff;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    border-radius:50px;
    -webkit-transition:all 2s ease-in-out;
    -moz-transition:all 2s ease-in-out;
    -o-transition:all 2s ease-in-out;
    transition:all 2s ease-in-out}
.shadow p{
    text-align:center;
    color:#fff;
    margin-top:10px;
    text-shadow:#bbb 0 1px 0,#b5b5b5 0 2px 0,#acacac 0 3px 0,#a0a0a0 0 4px 0,#919191 0 5px 0,#7f7f7f 0 6px 0,rgba(0,0,0,0.199219) 0 7px 1px,rgba(0,0,0,0.296875) 0 8px 6px;
    font-size:2em;
    font-family:'Allan',serif}
#dd13{
    position:absolute;
    top:95px;left:230px}
#dd1,#dd2,#dd3,#dd4,#dd5,#dd6,#dd7,#dd8,#dd9,#dd10,#dd11,#dd12,#dd12{
    width:60px;
    height:60px;
    text-align:center;
    color:#fff;
    text-shadow:#bbb 0 1px 0,#b5b5b5 0 2px 0,#acacac 0 3px 0,#a0a0a0 0 4px 0,#919191 0 5px 0,#7f7f7f 0 6px 0,rgba(0,0,0,0.199219) 0 7px 1px,rgba(0,0,0,0.296875) 0 8px 6px;
    font-size:2.5em;
    font-family:'Allan',serif;
        line-height:60px;
    margin:.67em 0;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    position:absolute;
    top:68px;
    left:230px;
    background-color:#ddd;
    -webkit-transition:all 2s ease-in-out;
    -moz-transition:all 2s ease-in-out;
    -o-transition:all 2s ease-in-out;
    transition:all 2s ease-in-out;
    -webkit-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)}
#dd1{
    -webkit-transition-delay:.1s;
    -moz-transition-delay:.1s;
    -o-transition-delay:.1s;
    -ms-transition-delay:.1s;
    transition-delay:.1s}
#dd2{
    -webkit-transition-delay:.2s;
    -moz-transition-delay:.2s;
    -o-transition-delay:.2s;
    -ms-transition-delay:.2s;
    transition-delay:.2s}
#dd3{
    -webkit-transition-delay:.3s;
    -moz-transition-delay:.3s;
    -o-transition-delay:.3s;
    -ms-transition-delay:.3s;
    transition-delay:.3s}
#dd4{
    -webkit-transition-delay:.4s;
    -moz-transition-delay:.4s;
    -o-transition-delay:.4s;
    -ms-transition-delay:.4s;
    transition-delay:.4s}
#dd5{
    -webkit-transition-delay:.5s;
    -moz-transition-delay:.5s;
    -o-transition-delay:.5s;
    -ms-transition-delay:.5s;
    transition-delay:.5s}
#dd6{
    -webkit-transition-delay:.6s;
    -moz-transition-delay:.6s;
    -o-transition-delay:.6s;
    -ms-transition-delay:.6s;
    transition-delay:.6s}
#dd7{
    -webkit-transition-delay:.7s;
    -moz-transition-delay:.7s;
    -o-transition-delay:.7s;
    -ms-transition-delay:.7s;
    transition-delay:.7s}
#dd8{
    -webkit-transition-delay:.8s;
    -moz-transition-delay:.8s;
    -o-transition-delay:.8s;
    -ms-transition-delay:.8s;
    transition-delay:.8s}
#dd9{
    -webkit-transition-delay:.9s;
    -moz-transition-delay:.9s;
    -o-transition-delay:.9s;
    -ms-transition-delay:.9s;
    transition-delay:.9s}
#dd10{
    -webkit-transition-delay:1s;
    -moz-transition-delay:1s;
    -o-transition-delay:1s;
    -ms-transition-delay:1s;
    transition-delay:1s}
#dd11{
    -webkit-transition-delay:1.1s;
    -moz-transition-delay:1.1s;
    -o-transition-delay:1.1s;
    -ms-transition-delay:1.1s;
    transition-delay:1.1s}
#dd12{
    -webkit-transition-delay:1.2s;
    -moz-transition-delay:1.2s;
    -o-transition-delay:1.2s;
    -ms-transition-delay:1.2s;
    transition-delay:1.2s}
#dd13{
    -webkit-transition:all 2s ease-in-out;
    -moz-transition:all 2s ease-in-out;
    -o-transition:all 2s ease-in-out;
    transition:all 2s ease-in-out}
#delay_demo:hover #dd_main{opacity:0}
#delay_demo:hover #dd1,#delay_demo.hover_effect #dd1{
    -webkit-transform:translate(-220px,100px);
    -moz-transform:translate(-220px,100px);
    -o-transform:translate(-220px,100px);
    -ms-transform:translate(-220px,100px);
    transform:translate(-220px,100px)}
#delay_demo:hover #dd2,#delay_demo.hover_effect #dd2{
    -webkit-transform:translate(-150px,100px);
    -moz-transform:translate(-150px,100px);
    -o-transform:translate(-150px,100px);
    -ms-transform:translate(-150px,100px);
    transform:translate(-150px,100px)}
#delay_demo:hover #dd3,#delay_demo.hover_effect #dd3{
    -webkit-transform:translate(-80px,100px);
    -moz-transform:translate(-80px,100px);
    -o-transform:translate(-80px,100px);
    -ms-transform:translate(-80px,100px);
    transform:translate(-80px,100px)}
#delay_demo:hover #dd4,#delay_demo.hover_effect #dd4{
    -webkit-transform:translate(-10px,100px);
    -moz-transform:translate(-10px,100px);
    -o-transform:translate(-10px,100px);
    -ms-transform:translate(-10px,100px);
    transform:translate(-10,100px)}
#delay_demo:hover #dd5,#delay_demo.hover_effect #dd5{
    -webkit-transform:translate(50px,100px);
    -moz-transform:translate(60px,100px);
    -o-transform:translate(60px,100px);
    -ms-transform:translate(60px,100px);
    transform:translate(60px,100px)}
#delay_demo:hover #dd6,#delay_demo.hover_effect #dd6{
    -webkit-transform:translate(120px,100px);
    -moz-transform:translate(130px,100px);
    -o-transform:translate(130px,100px);
    -ms-transform:translate(130px,100px);
    transform:translate(130px,100px)}
#delay_demo:hover #dd7,#delay_demo.hover_effect #dd7{
    -webkit-transform:translate(-130px,170px);
    -moz-transform:translate(-130px,170px);
    -o-transform:translate(-130px,170px);
    -ms-transform:translate(-130px,170px);
    transform:translate(-130px,170px)}
#delay_demo:hover #dd8,#delay_demo.hover_effect #dd8{
    -webkit-transform:translate(-60px,170px);
    -moz-transform:translate(-60px,170px);
    -o-transform:translate(-60px,170px);
    -ms-transform:translate(-60px,170px);
    transform:translate(-60px,170px)}
#delay_demo:hover #dd9,#delay_demo.hover_effect #dd9{
    -webkit-transform:translate(10px,170px);
    -moz-transform:translate(10px,170px);
    -o-transform:translate(10px,170px);
    -ms-transform:translate(10px,170px);
    transform:translate(10px,170px)}
#delay_demo:hover #dd10,#delay_demo.hover_effect #dd10{
    -webkit-transform:translate(80px,170px);
    -moz-transform:translate(80px,170px);
    -o-transform:translate(-80px,170px);
    -ms-transform:translate(80px,170px);
    transform:translate(80px,170px)}
#delay_demo:hover #dd11,#delay_demo.hover_effect #dd11{
    -webkit-transform:translate(150px,170px);
    -moz-transform:translate(150px,170px);
    -o-transform:translate(150px,170px);
    -ms-transform:translate(150px,170px);
    transform:translate(150px,170px)}
#delay_demo:hover #dd12,#delay_demo.hover_effect #dd12{
    -webkit-transform:translate(220px,170px);
    -moz-transform:translate(220px,170px);
    -o-transform:translate(220px,170px);
    -ms-transform:translate(220px,170px);
    transform:translate(220px,170px)}
#delay_demo:hover #dd13,#delay_demo.hover_effect #dd13{
    -webkit-transform:rotate(720deg) scale(2,2);
    -moz-transform:rotate(720deg) scale(2,2);
    -o-transform:rotate(720deg) scale(2,2);
    transform:rotate(720deg) scale(2,2)}

Html nya :

<section> <div id="delay_demo" class="shadow hover"> <div id="dd_main"></div> <div id="dd1">M</div> <div id="dd2">Y</div> <div id="dd3">I</div> <div id="dd4">S</div> <div id="dd5">P</div> <div id="dd6">U</div> <div id="dd7">N</div> <div id="dd8">K</div> <div id="dd9">R</div> <div id="dd10">O</div> <div id="dd11">C</div> <div id="dd12">C</div> <div id="dd13"><a href="#"><img src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-frc3/431110_362670053753351_888619142_n.jpg" alt="ssss3" width="60" height="60" /></a></div> <p class="center"> Hi,FRIENDS,...</p> </div> </section>

Nah Kalau Sudah Dicopy CSS dan HTML nya, Ganti URL :"https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-frc3/431110_362670053753351_888619142_n.jpg" Dengan Gambar kalian Yang Sudah Di Upload !

Tambahkan Kode Di atas CSS dan Di akhir Sperti Ini : <*style> CSS nya ... <*/style> Hilangkan Tanda Bintang nya, Kode ini Tidak Wajib Tapi Harus Ada ?hehe..

Sekin Dulu Belajarnya , Lain Kesempatan Kita Lanjut Lagi. Terimakasih yah !

|| ❖ | Copy Right By : Portal Gallery | Design By : Cuerosbhelatos ||