Cara Menciptakan Animasi Dengan Css

Teknik Membuat Animasi melaluiataubersamaini CSS

Assalamu'alaikum wr wb

CSS ialah salah satu cara untuk memperindah tampilan website kita, dengan css kita dapat saja membuat animasi yang keren, yuk mari kita bahas bersama.

Diatas ialah teladan dari animasi menggunakan css, ada beberapa hal yang harus diketahui dalam membuat animasi, yaitu @keyframes nama animasi, itu ialah daerah untuk meletakan isyarat animasinya, dan sebuah objek misalkan <div> dengan menambahkan isyarat css animation-name: nama animasi; animation-duration: 3s; . Maka objek <div> tersebut akan menjalankan animasi dari @keyframes nama animasi dengan durasi 3s. contoh:

Kode untuk animasi css yang diatas:

<style>
div .aa{
animation-name: one;
animation-duration: 5s;
animation-direction: alternate;
animation-iteration-count: infinite;
width: 60px;
height: 60px;
}
@keyframes one{
from{background: blue;}
to{background: yellow;}
}
</style>
<div class="aa">
</div>

Penjelasan:

animation-name: nama animasi.
animation-duration: durasi animasi, 5 detik ( dapat dalam detik ataupun ms ).
animation-direction: arah animasi, alternate ( dari posisi awal ke tamat kemudian dari tamat ke awal, dari biru ke kuning, dari kuning ke biru ).
animation-interation-count: berapa banyak animasi ditampilkan, infinite ( terus menerus ).
width: lebar objek, 60px.
height: tinggi objek, 60px.
@keyframes one: isi dari animasi yang berjulukan one.
from{background: blue;}: posisi awal animasi, background: blue; (background berwarna biru).
to{background: yellow;}: posisi tamat animasi, background: yellow; (background berwarna kuning).

Kita juga dapat menampilkan animasi dikala mouse terkena objek, coba arahkan mouse pada objek dibawah ini, maka objek tersebut akan berubah.

Kode untuk animasi css diatas:

<style>
div .aaa{
background: black;
width: 60px;
height: 60px;
}
div .aaa:hover{
animation-name: two;
animation-duration: 1s;
animation-direction: alternate;
animation-iteration-count: infinite;
}
@keyframes two{
0%{background: red;}
50%{background: blue;}
100%{width: 100px;transform: rotate(360deg);}
}
</style>
<div class="aaa">
</div>

Penjelasan:

div .aaa:hover: isyarat didalamnya akan aktif apabila mouse terkena objek, itu yang disebut dengan hover, kalau mouse tersebut belum terkena objek maka isyarat yang aktif spesialuntuklah yang berada dalam div .aaa{}
Berbeda dengan teladan yang pertama, untuk memilih progress dari animasinya kita dapat menggunakan persentase, dikala 0% maka background akan berwarna merah, kemudian pada 50% background akan berwarna biru, dan pada 100% objek akan berubah lebarnya menjadi 100px disertai merotasi 360deg.

Saya berharap klarifikasi singkat wacana cara membuat animasi dengan css ini dapat mempersembahkan manfaat untuk kita tiruana, terimakasih sudah mengunjungi blog aku.

Silahkan untuk berkomentar.

Wassalamu'alaikum wr wb