Belajar Animasi Pada CSS3

Belajar Animasi Pada CSS3 - CSS3 menyediakan fitur yang menarik dan membuat web semakin interaktif, salah satunya adalah animasi. Animasi dalam web bisa dibuat dengan property animation. Dengan fitur ini web akan lebih interaktif.
Untuk mempelajari property animation, ada baiknya kalian belajar mengenai property property dasar pada css, karena Animasi adalah membuat animasi pada property tersebut. Berikut adalah contoh animasi pada css3.

Berikut Kodenya.

div {

background-color: dodgerblue;
width: 200px;
height: 200px;
animation-name: test;
animation-duration: 5s;
animation-iteration-count: infinite;
margin: 150px auto;

} @keyframes test {

25% {

border-radius: 25%;
transform: rotate(90deg);

}
50% {

border-radius: 50%;
transform: rotate(18deg);

}
75% {

border-radius: 25%;
transform: rotate(90deg);

}

}

Nah berikut pembelajaran animasinya.

@keyframes

Keyframes merupakan komponen utama pada animation, maka dari itu kita harus mempelajarinya.
Keyframes adalah rangkaian yang menentukan proses animasi itu berjalan, atau sederhananya keyframes adalah jalan dari animasi css.
Berikut syntax dasarnya.

@keyframes namaAnimasi {

0% {

opacity: 1;

}

100% {

opacity: 0;

}

}

Tulisan namaAnimasi adalah nama animasi yang digunakan. Ada dua tahap animasi yaitu 0% dan 100%, artinya ketika 0%/awalnya opacitynya 1, kemudian ketika 100% opacitynya jadi 0.

Property Animation

Setelah menentukan nama animasi dan jalanya animasi, saatnya membuat animasinya. Untuk mengaturnya ada beberapa property yang dapat anda gunakan.

• animation-name : nama dari animasi
• animation-duration: durasi animasi
• animation-timing-function: kecepatan animasi(linear, ease, ease-in, ease-out, ease in-out, cubic-bezier)
• animation-delay: lama waktu tunda
• animation-iteration-count: jumlah perunlangan animasi
• animation-direction: arah pergerakan animasi
• animation-fill-mode: style saat animasi selesai(none, forwards, backwards, both)

Contoh

div {

animation-name: putar;
animation-duration: 4s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: both;

}

Itulah tutorial kali ini, memang cukup rumit, bagi yang tidak mau susah tinggal pakai library khusus animasi yaitu animate.css, bisa dibaca di artikel saya lainya Mengenal Animate.css dan Cara Memasangnya.
sekian postingan saya yang berjudul Belajar Animasi Pada CSS3.
Jangan lupa baca postingan saya sebelumnya Cara Memasang dan Menggunakan Font Awesome Icons