Properti animationFillMode HTML Style DOM dan Fungsinya
Properti Style animationFillMode DOM pada HTML digunakan untuk menentukan style dari elemen ketika animasi tidak dimainkan atau ketika animasi telah selesai dimainkan, atau ketika animasi sedang delay. Properti animationFillMode dapat melakukan override behavior default dari animasi CSS dengan menggunakan efek animasi CSS elemen ketika keyframe pertama adalah statusnya adalah "played" dan akan berhenti ketika efeknya telah mencapai keyframe terakhir atau telah selesai.
Sintak:
Return Values: Berfungsi untuk mengembalikan sebuah string yang merepresentasikan properti animation-fill-mode dari suatu elemen.
Property values:
Pendekatan: Elemen <div> mendapatkan nilai style yang diatur oleh keyframe pertama sebelum animasi dimulai selama periode waktu delay.
Sebelum memahami lebih dalam materi tentang Properti animationFillMode HTML Style DOM dan Fungsinya, terlebih dahulu pelajari materi tentang: Mengatur Durasi Animasi HTML Menggunakan animationDuration Style DOM, Mengatur Arah Animasi HTML Menggunakan animationDirection Style DOM, dan Mengatur Jeda Animasi HTML Menggunakan animationDelay Style DOM.
- Berfungsi untuk mengembalikan properti animationFillMode: object.style.animationFillMode;
- Berfungsi untuk mengatur properti animationFillMode: object.style.animationFillMode = " none | forwards | backwards | both | initial | inherit ";
Return Values: Berfungsi untuk mengembalikan sebuah string yang merepresentasikan properti animation-fill-mode dari suatu elemen.
Property values:
- none: Tidak akan menerapkan bentuk style apapun kepada target sebelum atau setelah target tersebut dieksekusi.
- forwards: Menerapkan nilai properti untuk waktu animasi berakhir.
- backwards: Menerapkan nilai properti yang didefinisikan pada keyframe yang memulai iterasi pertama dari animasi selama periode pendefinisian oleh animation-delay.
- both: Menerapkan nilai properti untuk forward dan backward ke animasi.
- initial: Mengatur properti ke nilai default-nya.
- inherit: Properti menerima inherit dari parent-nya.
Pendekatan: Elemen <div> mendapatkan nilai style yang diatur oleh keyframe pertama sebelum animasi dimulai selama periode waktu delay.
Contoh:
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width: 50px;
height: 50px;
background: green;
position: relative;
-webkit-animation: animate 2s 1;
/* Chrome, Safari, Opera */
animation: animate 2s 2;}
/* Chrome, Safari, Opera */
@-webkit-keyframes animate
{
from {left: 500px;}
to {left: 0px;}
}
@keyframes animate
{
from {left: 500px;}
to {left: 0px;}
}
</style>
</head>
<body>
<p>
Klik tombol "Try it" untuk
membuat elemen DIV tetap
menjaga style yang diatur oleh
keyframe terakhir ke tipe
{left:0px;}, ketika animasi
telah selesai dijalankan.
</p>
<button
onclick="myFunction()">
Try it
</button>
<script>
function myFunction()
{
// Kode program untuk Chrome,
// Safari, and Opera
document.getElementById(
"div1").style.WebkitAnimationFillMode =
"backwards";
document.getElementById(
"div1").style.animationFillMode =
"backwards";
}
</script>
<div
id="div1">
</div>
</body>
</html>
Baca Juga:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width: 50px;
height: 50px;
background: green;
position: relative;
-webkit-animation: animate 2s 1;
/* Chrome, Safari, Opera */
animation: animate 2s 2;}
/* Chrome, Safari, Opera */
@-webkit-keyframes animate
{
from {left: 0px;}
to {left: 500px;}
}
@keyframes animate
{
from {left: 0px;}
to {left: 500px;}
}
</style>
</head>
<body>
<p>
Klik tombol "Try it" untuk
membiarkan elemen DIV menjaga
style yang diatur oleh
keyframe terakhir ke
{left:500px;}, ketika animasi
telah selesai dijalankan.
</p>
<button
onclick="myFunction()">
Try it
</button>
<script>
function myFunction()
{
// Kode program untuk Chrome,
// Safari, and Opera
document.getElementById(
"div1").style.WebkitAnimationFillMode =
"forwards";
document.getElementById(
"div1").style.animationFillMode =
"forwards";
}
</script>
<div
id="div1">
</div>
</body>
</html>
Properti animationFillMode dalam pengaturan gaya elemen HTML merupakan bagian dari konsep animasi yang sangat penting dalam desain antarmuka pengguna berbasis web. Fungsinya terkait langsung dengan bagaimana elemen-elemen HTML berperilaku selama atau setelah animasi berjalan. Dengan memahami bagaimana properti ini bekerja, pemrogram atau perancang dapat menciptakan pengalaman visual yang lebih menarik dan sesuai dengan kebutuhan interaksi pengguna.
Animasi dalam HTML merupakan cara yang efektif untuk memberikan dinamika pada elemen-elemen halaman web. Namun, tidak semua elemen yang dianimasikan dapat tetap dalam keadaan animasi sepanjang waktu. Beberapa elemen perlu berubah setelah animasi selesai, baik untuk mempertahankan posisi atau gaya terakhirnya atau bahkan kembali ke keadaan semula. Properti animationFillMode berfungsi untuk menentukan bagaimana elemen-elemen ini berperilaku setelah animasi selesai.
Secara umum, properti ini memiliki beberapa nilai yang dapat digunakan, yang mempengaruhi bagaimana animasi berakhir pada elemen yang dianimasikan. Terdapat dua nilai utama yang sering digunakan dalam properti ini: forwards dan backwards. Kedua nilai ini mengatur posisi atau penampilan elemen setelah animasi selesai, dengan cara yang berbeda.
Nilai forwards menentukan bahwa elemen akan tetap pada keadaan terakhir yang dicapai selama animasi selesai. Artinya, jika sebuah animasi mengubah ukuran, posisi, atau warna suatu elemen, elemen tersebut akan mempertahankan keadaan tersebut setelah animasi berakhir. Sebagai contoh, jika elemen tersebut bergerak dari posisi awal ke posisi akhir selama animasi, setelah animasi berakhir, elemen tersebut akan tetap berada di posisi akhir, tanpa kembali ke posisi semula.
Sebaliknya, nilai backwards memengaruhi elemen dengan cara yang berlawanan. Jika animasi memiliki nilai backwards, elemen akan mempertahankan gaya yang ditetapkan pada keyframe pertama. Dengan kata lain, elemen akan kembali ke keadaan semula segera setelah animasi selesai. Ini berguna ketika ingin agar elemen kembali ke keadaan sebelum animasi dimulai, memberikan kesan animasi yang lebih teratur atau terkontrol.
Terdapat juga nilai both, yang menggabungkan dua perilaku tersebut. Dengan menggunakan nilai both, elemen akan tetap pada keadaan terakhir yang dicapai selama animasi berjalan (seperti pada nilai forwards), namun jika animasi belum dimulai atau sedang berada pada tahap awal, elemen akan menampilkan gaya yang sesuai dengan keyframe pertama (seperti pada nilai backwards). Ini memberikan fleksibilitas lebih bagi pengaturan animasi yang melibatkan perubahan status dari awal hingga akhir.
Sebagai tambahan, ada nilai default pada properti ini yang disebut none. Nilai none menunjukkan bahwa elemen tidak akan mempertahankan gaya atau posisi apapun setelah animasi selesai. Ini berarti, setelah animasi berakhir, elemen akan kembali ke keadaan semula, sesuai dengan gaya yang sudah ditentukan sebelumnya sebelum animasi dimulai.
Pentingnya penggunaan animationFillMode dapat dilihat dalam berbagai situasi desain halaman web, terutama ketika berhubungan dengan elemen-elemen yang harus berinteraksi dengan pengguna atau elemen lain setelah animasi selesai. Misalnya, dalam kasus tampilan yang menggunakan transisi warna atau ukuran, setelah animasi selesai, elemen yang dianimasikan perlu berada dalam keadaan yang sesuai dengan gaya terakhirnya, sehingga pengaturan ini sangat berguna. Penggunaan yang tepat dapat menciptakan pengalaman pengguna yang lebih halus dan tidak mengganggu, karena animasi yang diterapkan akan memberikan dampak yang diinginkan tanpa membuat elemen tampak menghilang atau beralih secara tiba-tiba.
Selain itu, pemahaman yang mendalam tentang penggunaan animationFillMode juga penting dalam konteks interaksi pengguna dengan elemen-elemen web. Misalnya, sebuah tombol yang dianimasikan dengan perubahan ukuran dapat menggunakan nilai forwards agar tetap pada ukuran terakhir setelah animasi selesai, memberikan kesan bahwa tombol tersebut sudah dalam keadaan siap untuk diinteraksikan kembali oleh pengguna. Sebaliknya, tombol yang dianimasikan dengan nilai backwards akan kembali ke ukuran semula setelah animasi selesai, memberikan indikasi bahwa perubahan tersebut hanya bersifat sementara.
Penerapan nilai animationFillMode juga bermanfaat ketika merancang elemen-elemen yang harus tampak terintegrasi secara mulus dengan animasi lainnya. Dalam situasi seperti ini, menggabungkan beberapa nilai properti animasi, termasuk animationFillMode, dapat memastikan bahwa elemen-elemen di halaman web dapat berinteraksi dengan baik, tidak hanya selama animasi berlangsung, tetapi juga setelah animasi selesai, sehingga menciptakan pengalaman yang konsisten bagi pengguna.
Perlu diperhatikan bahwa penggunaan animationFillMode juga harus disesuaikan dengan jenis animasi dan tujuan desain yang ingin dicapai. Dalam beberapa kasus, animator atau perancang web mungkin lebih memilih untuk menggunakan nilai none agar animasi terasa lebih natural dan tidak membebani elemen dengan perubahan yang tidak perlu setelah animasi berakhir. Namun, dalam situasi lain, terutama jika elemen perlu dipertahankan dalam keadaan tertentu setelah animasi selesai, menggunakan nilai forwards atau both akan lebih sesuai.
Secara keseluruhan, properti animationFillMode dalam HTML memberikan kontrol lebih besar bagi perancang web terhadap bagaimana animasi berperilaku pada elemen-elemen yang dianimasikan. Penggunaannya memungkinkan elemen-elemen tersebut untuk tetap berada dalam keadaan yang diinginkan, memberikan hasil yang lebih stabil dan terkoordinasi dalam desain halaman web. Mengerti bagaimana dan kapan menggunakan properti ini dapat sangat meningkatkan kualitas interaksi pengguna dengan elemen-elemen yang dianimasikan, menjadikannya bagian integral dari proses desain yang lebih halus dan efektif.
Penggunaan animationFillMode juga terkait dengan prinsip desain interaktif yang penting, yaitu memberikan umpan balik visual yang jelas dan tepat waktu kepada pengguna. Dengan pengaturan yang benar, perancang web dapat memastikan bahwa elemen-elemen halaman tidak hanya bergerak atau berubah secara efektif selama animasi, tetapi juga tetap relevan dan fungsional setelah animasi selesai, memberi pengalaman yang lebih menyenangkan dan mudah dipahami. Sebuah halaman web yang menggunakan animasi dengan mempertimbangkan properti ini dapat menghindari kebingungan pengguna dan memberi kesan yang lebih profesional serta terorganisir dengan baik.
Seiring dengan perkembangan teknologi dan meningkatnya kebutuhan desain halaman web yang lebih interaktif, penggunaan properti seperti animationFillMode akan semakin penting dalam menciptakan antarmuka pengguna yang responsif dan dinamis. Seiring dengan semakin canggihnya alat dan teknik animasi yang tersedia, penggunaan properti ini dapat memungkinkan pembuatan efek animasi yang lebih kompleks dan menyatu secara alami dengan elemen-elemen di halaman web. Oleh karena itu, pemahaman yang lebih mendalam tentang cara penggunaan dan fungsinya dapat memberikan keuntungan yang besar dalam menghasilkan desain halaman web yang efektif dan menarik.
Referensi Tambahan:
- 10 Contoh Properti Background Style DOM pada HTML
- 5 Contoh Penggunaan Properti backgroundAttachment Style DOM pada HTML
- 4 Parameter Properti backgroundColor Style DOM pada HTML
- 4 Contoh Penggunaan Properti backgroundImage Style DOM pada HTML
- 5 Contoh Penggunaan Properti backgroundPosition Style DOM pada HTML
- 4 Value Properti backgroundRepeat Style DOM pada HTML
- 3 Value Properti backgroundClip Style DOM pada HTML
Artikel ini akan dibaca oleh: Dewi Kartikasari, Dewi Mustikasari, Dhea Khairunnisa Putri, Dhita Citra Mardyana, dan Dian Amaliana.
7 komentar untuk "Properti animationFillMode HTML Style DOM dan Fungsinya"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti animationFillMode Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti animationFilMode Style DOM pada HTML:
Hapus1. Google Chrome 43.0
2. Firefox 16.0
3. Opera 30.0
Apa fungsi dari properti animationFillMode Style DOM pada HTML?
BalasHapusProperti animationFillMode Style DOM pada HTML digunakan untuk menentukan style atau gaya apa yang akan diterapkan pada elemen ketika animasi sedang tidak diputar atau ketika animasi telah selesai dijalankan atau penundaan.
HapusProperti animationFillMode Style DOM pada HTML digunakan untuk menentukan bagaimana style diterapkan di luar waktu eksekusi yaitu setelah selesai atau jika dilakukan penundaan pada perputaran animasi.
HapusApa manfaat dari penggunaan properti animationFillMode Style DOM pada HTML?
BalasHapusProperti ini sangat berguna dalam pengaturan style animasi css ke elemen sebelum animasi tersebut mulai dijalankan atau setelah animasi selesai dijalankan.
Hapus