Di zaman sekarang, banyak website yang menggunakan gambar animasi untuk mempercantik tampilannya. Namun seiring kebutuhan akses yang sangat cepat, penggunaan animasi dengan gambar mulai dikurangi. Dalam tutorial ini, kita akan membuat animasi menggunakan CSS, dan tentu saja ini membuat load website lebih cepat dibandingkan menggunakan gambar. Dan yang akan kita buat adalah animasi square-to-circle (mengubah kotak menjadi bulat).
Pengenalan @keyframes dan Animation
Sebelum kita memulai membuat seperti animasi diatas. Kita harus mengenal lebih dulu apa itu @keyframes dan Animation.
Komponen utama dari CSS Animations adalah @keyframes yang merupakan aturan dimana animasi itu dibuat. Dapat diasumsikan bahwa @keyframes pada CSS seperti fungsi pada javascript, dimana didalamnya terdapat tahap-tahap yang dapat kita definisikan dengan style yang berbeda.
Komponen utama dari CSS Animations adalah @keyframes yang merupakan aturan dimana animasi itu dibuat. Dapat diasumsikan bahwa @keyframes pada CSS seperti fungsi pada javascript, dimana didalamnya terdapat tahap-tahap yang dapat kita definisikan dengan style yang berbeda.
Jika @keyframes sudah didefinisikan, maka kita harus memasangnya pada selector CSS agar animasi itu dapat berjalan.
@keyframes
Disinilah kita mendifiniskan bagaimana animasi kita bekerja. @keyframes memiliki beberapa atribut, diantaranya:
1. Nama (disini kita akan menamainya simpleFade)
2. Stages (dari 0% - 100%), from (0%) dan to (100%).
3. CSS Style, dimana kita mengatur style di setiap stages.
Contoh
@keyframes simpleFade { 0% { opacity: 1; } 100% { opacity: 0; } }
atau
@keyframes simpleFade { from { opacity: 1; } to { opacity: 0; } }
atau cara singkatnya seperti:
@keyframes simpleFade { to { opacity: 0; } }
Ketiga contoh kode diatas, akan membuat elemen bertransisi dari solid ke transparent (dari opacity : 1 ke opacity : 0).
Animation
Animation adalah properti dari CSS yang berfungsi untuk memanggil @keyframes yang sudah didefinisikan sebelumnya. Animasi dapat memiliki banyak atribut:
1. animation-name: nama @keyframes yang sudah dibuat.
2. animation-duration: total durasi animasi berjalan dari awal sampai akhir
3. animation-timing-function: untuk mengatur kecepatan animasi ( linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier ).
4. animation-delay: lama delay/waktu tunggu sebelum animasi dimulai.
5. animation-iteration-count: berapa kali animasi dijalankan.
6. animation-direction: untuk mengatur arah animasi, bisa dari start ke end ,atau dari end ke start, atau keduanya.
7. animation-fill-mode: menspesifikasikan style apa yang akan diterapkan jika animasi sudah selesai berjalan ( none | forwards | backwards | both ).
Contoh:
atau cara singkatnya:
Contoh kode diatas akan menimbulkan efek 'blink', dengan lama waktu tunggu 1 detik, total durasi animasi 4 detik, dengan arah alternate dan animasinya terus berjalan (infinite).
1. animation-name: nama @keyframes yang sudah dibuat.
2. animation-duration: total durasi animasi berjalan dari awal sampai akhir
3. animation-timing-function: untuk mengatur kecepatan animasi ( linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier ).
4. animation-delay: lama delay/waktu tunggu sebelum animasi dimulai.
5. animation-iteration-count: berapa kali animasi dijalankan.
6. animation-direction: untuk mengatur arah animasi, bisa dari start ke end ,atau dari end ke start, atau keduanya.
7. animation-fill-mode: menspesifikasikan style apa yang akan diterapkan jika animasi sudah selesai berjalan ( none | forwards | backwards | both ).
Contoh:
.element { animation-name: simpleFade; animation-duration: 4s; animation-delay: 1s; animation-iteration-count: infinite; animation-timing-function: linear; animation-direction: alternate; }
atau cara singkatnya:
.element { animation: simpleFade 4s 1s infinite linear alternate; }
Contoh kode diatas akan menimbulkan efek 'blink', dengan lama waktu tunggu 1 detik, total durasi animasi 4 detik, dengan arah alternate dan animasinya terus berjalan (infinite).
Multiple Animations
Kita dapat menambahkan beberapa animasi dalam satu selector CSS. Katakanlah kita akan menambahkan animasi rotate. Maka hal tersebut dapat ditulis seperti ini:.element { animation: simpleFade4s 1s infinite linear alternate, simpleRotate 4s 1s infinite linear alternate; } @keyframes simpleFade { to { opacity: 0; } } @keyframes simpleRotate{ to { transform: rotate(180deg); } }
Menambahkan Prefiks Vendor
Contoh kode CSS yang sudah ditulis diatas merupakan sebuah draft yang jika kita pasang, pasti tidak akan berjalan. Kenapa? karena kita perlu memasukan prefiks vendor kepada beberapa atribut CSS sesuai dengan target browser agar dapat berjalan. Standar prefiks yang dapat dipakai adalah:
Chrome & Safari: -webkit-
Firefox: -moz-
Opera: -o-
Internet Explorer: -ms-
Sebuah animasi yang sudah ditambahkan prefiks vendor seperti ini:
.element { -webkit-animation: simpleFade 4s 1s infinite linear alternate; -moz-animation: simpleFade 4s 1s infinite linear alternate; -ms-animation: simpleFade 4s 1s infinite linear alternate; -o-animation: simpleFade 4s 1s infinite linear alternate; animation: simpleFade 4s 1s infinite linear alternate; }
dan @keyframes yang ditambahkan prefiks vendor seperti ini:
@-webkit-keyframes simpleFade { /* your style */ } @-moz-keyframes simpleFade { /* your style */ } @-ms-keyframes simpleFade { /* your style */ } @-o-keyframes simpleFade { /* your style */ } @keyframes simpleFade { /* your style */ }
Disini kita menambahkan semua standar vendor prefix agar dapat berjalan disemua browser.
Catatan: untuk kemudahan dalam membaca source code, untuk selanjutnya saya tidak akan menambahkan vendor prefix pada @keyframes dan selector CSS.
Square-to-circle
Sekarang kita akan masuk ke tahap membuat transisi perubahan bentuk elemen. Kita akan membuat total 5 stages dimana setiap stages kita masukan animasi mengubah border-radius, rotate, dan background-color.
Elemen Dasar
Sekarang kita buat elemen dasarnya. Buatlah sebuah elemen div dengan atribut class "animObject".
<div class="animObject"></div>
Lalu tambahkan selector CSS berikut:
div { width: 200px; height: 200px; background-color: coral; }
Deklarasi @keyframes
Mari kita deklarasikan sebuah @keyframes. Kita beri nama square-to-circle yang mana ia memiliki 5 stages:
@keyframes square-to-circle { 0%{} 25%{} 50%{} 75%{} 100%{} }
Kita harus menambahkan style apa yang akan digunakan disetiap stages. Pertama, kita pasang style border-radius yang berbeda di setiap stages.
@-webkit-keyframes square-to-circle { 0% { border-radius:0 0 0 0; } 25% { border-radius:50% 0 0 0; } 50% { border-radius:50% 50% 0 0; } 75% { border-radius:50% 50% 50% 0; } 100% { border-radius:50%; }
}
Kedua, kita dapat menambahkan background-color yang berbeda juga:
@keyframes square-to-circle { 0% { border-radius:0 0 0 0; background:coral; } 25% { border-radius:50% 0 0 0; background:darksalmon; } 50% { border-radius:50% 50% 0 0; background:indianred; } 75% { border-radius:50% 50% 50% 0; background:lightcoral; } 100% { border-radius:50%; background:darksalmon; } }
Agar lebih menarik, kita juga menambahkan fungsi rotate disetiap stagesnya:
@keyframes square-to-circle { 0% { border-radius:0 0 0 0; background:coral; transform:rotate(0deg); } 25% { border-radius:50% 0 0 0; background:darksalmon; transform:rotate(45deg); } 50% { border-radius:50% 50% 0 0; background:indianred; transform:rotate(90deg); } 75% { border-radius:50% 50% 50% 0; background:lightcoral; transform:rotate(135deg); } 100% { border-radius:50%; background:darksalmon; transform:rotate(180deg); } }
Memasang Animasi
Setelah kita membuat @keyframes , kita perlu menambahkannya pada selector div:
div { width: 200px; height: 200px; background-color: coral; animation: square-to-circle 2s 1s infinite alternate; }
Pada kode diatas, kita memiliki atribut animation:
1. animation-name : square-to-circle.
2. animation-duration ; 2s.
3. animation-delay : 1s.
4. animation-iteration-count : infinite, ini berarti animasi ini akan terus berjalan.
5. animation-direction : alternate, ini berarti animasi ini akan berjalan dari awal sampai akhir, kemudian dari akhir sampai awal, dan seterusnya.
Jika kita lihat source code terakhir tanpa vendor prefix, seperti ini:
<style> @keyframes square-to-circle { 0% { border-radius:0 0 0 0; background:coral; transform:rotate(0deg); } 25% { border-radius:50% 0 0 0; background:darksalmon; transform:rotate(45deg); } 50% { border-radius:50% 50% 0 0; background:indianred; transform:rotate(90deg); } 75% { border-radius:50% 50% 50% 0; background:lightcoral; transform:rotate(135deg); } 100% { border-radius:50%; background:darksalmon; transform:rotate(180deg); } } .animObject { left: calc(100% - 100px); top: calc(100% - 100px); margin: 50px; width: 200px; height: 200px; background-color: coral; -webkit-animation: square-to-circle 2s 1s infinite alternate; -moz-animation: square-to-circle 2s 1s infinite alternate; -ms-animation: square-to-circle 2s 1s infinite alternate; -o-animation: square-to-circle 2s 1s infinite alternate; animation: square-to-circle 2s 1s infinite alternate; } </style> <div class="animObject"> </div>
Animasi diatas dapat berjalan di modern browser, hanya saja pada firefox ada sedikit keanehan. Bisa dilihat bahwa hasil rendering dari object pada firefox cukup buruk.
![]() |
tutplus |
outline: 1px solid transparent;
Dengan demikian, tampilan pada firefox akan sempurna.
Sumber : Webdesign Tutplus
Bagus mas.. penjelasannya saya suka...
ReplyDeleteKeren y CSS ! :D
Makasih mas, iya saya juga itu niru dari sumbernya, soalnya jelas banget penjelasannya :D
Deletewah detil sekali penjelasannya :D
ReplyDeletebiar jelas :D
DeleteSesuatu yah
ReplyDeleteaaaaa, syahrini!!!
Delete