Trik Membuat Animasi Down HTML CSS3
Tips Membuat Animasi Down HTML dan CSS3~Pada tutorial kali ini saya ingin membagikan sebuah tutorial yaitu mengenai Tips membuat animasi menggunakan CSS3, di css3 ini saya banyak menggunakan kode animasi @keyframes dan animation beserta durasinya yang nantinya bisa memunculkan sebuah animasi pada website teman-teman. Animasi Down ini berarti animasi yang turun dari atas ke bawah, Ok langsung saja teman-teman perhatikan tahap-tahapnya :
1. Pertama teman-teman buat dahulu tag html-nya, seperti dibawah ini :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Membuat Animasi Turun</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="title"> <h2 class="caption">Animasi Down CSS3</h2> </div> <div class="bounce"> <img src="img/bg1.jpg" alt="contoh gambar" class="img-circle1 animation-img1"> <img src="img/bg2.jpg" alt="contoh gambar" class="img-circle2 animation-img2"> <img src="img/bg3.jpg" alt="contoh gambar" class="img-circle3 animation-img4"> <img src="img/bg4.jpg" alt="contoh gambar" class="img-circle2 animation-img3"> </div> <!-- Design Animasi by AgusTutorial --> </body> </html>
2. Kedua teman-teman buat file baru dengan nama style.css, lalu buat kode dibawah ini atau teman bisa copas saja :
*{
margin:0 auto;
box-sizing:border-box;
font-family:Helvetica;
}
.title{
overflow:hidden;
text-align:center;
font-size:40px;
position:relative;
z-index: 99999;
padding:50px;
background-color:white;
border-bottom:5px solid #ff5353;
}
.title h2 {
position:relative;
animation:right 3s;
-webkit-animation:right 3s;
-moz-animation:right 3s;
}
/*sedikit animasi pada judul*/
@-webkit-keyframes right{
from{right:-100%;opacity:0;}
to{right:0;opacity:1;}
}
img{
display:block;
width:auto;
max-width:100%;
}
.bounce{
width:80%;
}
img.img-circle1,.img-circle2,.img-circle3{
top:120px;
position:relative;
border-radius:50%;
height:200px;
width:200px;
text-align:center;
border:5px solid white;
box-shadow:0px 0px 5px black;
display:inline-block;
margin:0 35px;
}
.img-circle1{
float:left;
}
.img-circle2{
float:none;
}
.img-circle3{
float:right;
}
/*animasi untuk images*/
.animation-img1{
animation: down 1.4s;
-webkit-animation: down 1.4s;
-moz-animation: down 1.4s;
}
.animation-img2{
animation: down2 1.5s;
-webkit-animation: down2 1.5s ;
-moz-animation: down2 1.5s ;
}
.animation-img3{
animation: down3 1.8s;
-webkit-animation: down3 1.8s ;
-moz-animation: down3 1.8s ;
}
.animation-img4{
animation: down4 1.9s;
-webkit-animation: down4 1.9s ;
-moz-animation: down4 1.9s ;
}
/*proses animasi berlangsung*/
@-webkit-keyframes down4{
0%{top:-2500px;opacity:1;}
50%{top:250px;}
100%{top:120px;}
}
@-webkit-keyframes down3{
0%{top:-2000px;opacity:1;}
50%{top:250px;}
100%{top:120px;}
}
@-webkit-keyframes down2{
0%{top:-1500px;opacity:1;}
50%{top:250px;}
100%{top:120px;}
}
@-webkit-keyframes down{
0%{top:-300px;opacity:1;}
50%{top:250px;}
100%{top:120px;}
}
3. Yang terakhir, silahkan simpan dan lihat hasilnya. Jika sudah tampil maka tampilannya seperti dibawah ini :
Bagi teman-teman yang ingin download source kodenya silahkan klik tombol download dibawah ini :
Keterangan : Animasi yang akan muncul ialah saat pertama membuka file website tersebut, yang terjadi ialah sebuah gambar yang dianimasikan akan jatuh dari atas ke bawah seperti yang terlihat pada gambar diatas.
Sekian dulu ya teman,Semoga tutorial dari saya bermanfaat untuk kalian semua dan saya ucapkan terima kasih .
keren gan :-)
ReplyDelete