DOM pada HTML digunakan untuk mengembalikan atau mengatur nama dari animasi @keyframes.
Mengandung nama dari animasi.
Contoh:<!DOCTYPE html>
<html>
<head>
<title>
Properti HTML DOM animationName
</title>
<style>
div
{
width: 100px;
height: 100px;
background: green;
position: relative;
-webkit-animation: move_1 2s infinite;
/* For Chrome, Safari, Opera*/
animation: move_1 2s infinite;}
/* For Chrome, Safari, Opera */
@-webkit-keyframes move_1
{
from {left: 150px;}
to {left: 350px;}
}
@keyframes move_1
{
from {left: 150px;}
to {left: 350px;}
}
/* Untuk browser Chrome,
Safari, Opera */
@-webkit-keyframes move_2
{
from {
left: 270px;
width: 0px;
height: 0px;}
to {
left: 270px;
width: 100px;
height: 100px;
background: blue;}
}
@keyframes move_2
{
from {
left: 270px;
width: 0px;
height: 0px;}
to {
left: 270px;
width: 100px;
height: 100px;
background: blue;}
}
</style>
</head>
<body
style="text-align:center;">
<h1
style="color:green;">
Blog Elfan
</h1>
<h2>
Properti DOM animationName
</h2>
<button
onclick="DOns()">
Click Here
</button>
<br>
<br>
<div
id="MHN_DIV">
</div>
<script>
function DOns()
{
// Mengubah nama animasi.
document.getElementById(
"MHN_DIV").style.WebkitAnimationName =
"move_2";
// Untuk browser Chrome,
Safari, and Opera
document.getElementById(
"MHN_DIV").style.animationName =
"move_2";
}
</script>
</body>
</html>
Contoh:<!DOCTYPE html>
<html>
<head>
<title>
Properti HTML DOM
animationName
</title>
<style>
div
{
width: 100px;
height: 100px;
background: green;
position: relative;
-webkit-animation: move_1 2s infinite;
/* Untuk browser Chrome,
Safari, Opera */
animation: move_1 2s infinite;}
/* Untuk browser Chrome,
Safari, Opera */
@-webkit-keyframes move_1
{
from {left: 150px;}
to {left: 350px;}
}
@keyframes move_1
{
from {left: 150px;}
to {left: 350px;}
}
/* Untuk browser Chrome,
Safari, Opera */
@-webkit-keyframes move_2
{
from {left: 270px;
width: 0px;}
to {left: 270px;
width: 100px;
background: blue;}
}
@keyframes move_2
{
from {left: 270px;
width: 0px;}
to {left: 270px;
width: 100px;
background: blue;}
}
</style>
</head>
<body
style="text-align:center;">
<h1
style="color:green;">
Blog Elfan
</h1>
<h2>
Properti DOM animationName
</h2>
<button
onclick="Bonnxs()">
Click Here
</button>
<br>
<br>
<div
id="MBB_DIV">
</div>
<script>
function Bonnxs()
{
// Mengubah nama animasi.
document.getElementById(
"MBB_DIV").style.WebkitAnimationName =
"move_2";
// Untuk browser Chrome,
// Safari, dan Opera.
document.getElementById(
"MBB_DIV").style.animationName = "move_2";
}
</script>
</body>
</html>
Animasi HTML merupakan salah satu fitur penting yang dapat memperkaya pengalaman pengguna dalam berinteraksi dengan sebuah halaman web. Salah satu aspek dalam pengaturan animasi HTML adalah penggunaan properti animationName dalam gaya dokumen objek model HTML. Properti ini digunakan untuk menentukan nama animasi yang akan diterapkan pada elemen-elemen tertentu dalam halaman web. Properti animationName menjadi salah satu bagian penting dalam mendefinisikan animasi yang kompleks, serta memberi kontrol yang lebih besar terhadap animasi yang dijalankan pada elemen-elemen HTML.
Untuk memahami pentingnya pengaturan animasi menggunakan properti animationName, pertama-tama perlu dipahami bahwa animasi HTML berfungsi untuk memberikan efek pergerakan atau perubahan visual pada elemen dalam halaman web. Animasi ini dapat berupa perubahan bentuk, ukuran, posisi, warna, dan banyak aspek visual lainnya. Dengan animasi, halaman web dapat menjadi lebih dinamis dan menarik, serta memberikan pengalaman interaktif yang lebih baik bagi pengunjung.
Pada umumnya, animasi dalam HTML dilakukan dengan menggabungkan berbagai properti gaya yang digunakan untuk mengubah elemen-elemen visual dalam waktu yang ditentukan. Salah satu cara untuk mengatur animasi adalah dengan menggunakan animationName. Properti ini memungkinkan pengembang web untuk menentukan nama animasi yang akan diterapkan pada elemen tertentu. Nama animasi yang dimaksud di sini merujuk pada definisi animasi yang lebih rinci yang dibuat menggunakan aturan animasi dalam CSS.
Animasi dalam HTML menggunakan animationName berfungsi dengan cara menghubungkan elemen yang ingin dianimasikan dengan nama animasi yang sudah didefinisikan sebelumnya. Nama animasi ini pada dasarnya adalah identifikasi unik yang mengarah pada rangkaian aturan yang mendeskripsikan bagaimana animasi tersebut berfungsi, seperti durasi, efek transisi, dan perubahan visual lainnya. Dengan demikian, pengembang dapat dengan mudah merujuk pada animasi tertentu tanpa harus mengulang definisi aturan animasi setiap kali ingin diterapkan pada elemen yang berbeda.
Sebagai contoh, animasi yang dapat digunakan dalam halaman web sering kali melibatkan perubahan posisi, ukuran, transparansi, atau rotasi elemen. Ketika nama animasi diberikan pada elemen, properti animationName akan mencocokkan elemen tersebut dengan aturan animasi yang telah didefinisikan. Animasi akan dimulai sesuai dengan instruksi yang ditetapkan dalam aturan tersebut, dan elemen akan bergerak atau berubah sesuai dengan parameter yang ditentukan. Penggunaan nama animasi ini memungkinkan pengembang untuk dengan mudah mengelola animasi yang kompleks dan menerapkannya ke berbagai elemen dengan konsistensi yang lebih baik.
Keuntungan utama dari penggunaan properti animationName adalah fleksibilitas yang ditawarkannya. Sebagai contoh, jika ada beberapa elemen pada halaman web yang perlu dianimasikan dengan cara yang sama, pengembang cukup menentukan nama animasi yang sama untuk setiap elemen tersebut. Hal ini mengurangi duplikasi kode dan mempermudah pemeliharaan serta pengelolaan animasi dalam sebuah proyek web. Dengan demikian, pengelolaan animasi menjadi lebih efisien, terutama ketika animasi yang digunakan sangat kompleks dan diterapkan pada banyak elemen yang berbeda.
Di samping itu, properti animationName juga memungkinkan pengembang untuk mengontrol jalannya animasi lebih tepat. Misalnya, animasi dapat dimulai dan berhenti pada waktu yang tepat, atau dapat diulang beberapa kali untuk menciptakan efek berulang yang menarik. Penggunaan nama animasi juga memungkinkan pengembang untuk menyesuaikan pengaturan animasi dengan kebutuhan spesifik proyek, seperti menentukan jenis animasi yang diterapkan pada elemen tertentu berdasarkan interaksi pengguna atau peristiwa dalam halaman web.
Namun, meskipun penggunaan properti animationName sangat berguna dalam mengelola animasi, ada beberapa hal yang perlu diperhatikan. Pengembang perlu memastikan bahwa nama animasi yang diberikan sesuai dengan aturan animasi yang sudah didefinisikan. Kesalahan dalam penamaan animasi dapat mengakibatkan animasi yang tidak berfungsi dengan baik atau bahkan tidak diterapkan sama sekali. Oleh karena itu, sangat penting untuk memastikan bahwa nama animasi yang digunakan dalam properti animationName sudah sesuai dengan nama yang telah didefinisikan dalam aturan animasi CSS.
Selain itu, properti animationName dapat digunakan bersama dengan properti lainnya dalam CSS untuk menciptakan animasi yang lebih kaya dan dinamis. Beberapa properti terkait animasi yang umum digunakan bersama dengan animationName antara lain adalah animationDuration, yang mengatur durasi animasi, animationTimingFunction, yang mengontrol kecepatan perubahan animasi, dan animationDelay, yang menentukan waktu tunda sebelum animasi dimulai. Dengan menggabungkan beberapa properti ini, pengembang dapat menciptakan efek animasi yang lebih halus dan kompleks.
Animasi yang diterapkan melalui properti animationName dapat memberikan dampak besar terhadap desain dan fungsionalitas halaman web. Animasi yang halus dan konsisten dapat membuat halaman web terlihat lebih profesional dan interaktif, serta meningkatkan pengalaman pengguna secara keseluruhan. Oleh karena itu, pemahaman yang baik tentang cara menggunakan animationName sangat penting bagi setiap pengembang web yang ingin menciptakan situs web yang menarik dan fungsional.
Pada akhirnya, penggunaan properti animationName dalam gaya dokumen objek model HTML memberikan kontrol yang lebih besar atas animasi yang diterapkan pada elemen-elemen dalam halaman web. Dengan kemampuan untuk menentukan nama animasi yang spesifik, pengembang dapat mengelola animasi dengan lebih mudah, mengurangi duplikasi kode, dan menciptakan pengalaman pengguna yang lebih dinamis. Properti ini tidak hanya meningkatkan fleksibilitas dalam pengelolaan animasi, tetapi juga memungkinkan pengembang untuk membuat halaman web yang lebih menarik, interaktif, dan profesional. Dengan memahami dan memanfaatkan animationName, pengembang dapat lebih efektif dalam menciptakan animasi yang menyatu dengan desain keseluruhan halaman web dan memperkaya interaksi pengguna.
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti animationName Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti animationName Style DOM pada HTML:
Hapus1. Google Chrome: 43.0, 4.0 Webkit
2. Mozilla Firefox: 16.0, 5.0 moz
3. Edge: 10.0
4. Opera: 30.0, 15.0 webkit
5. Safari: 4.0 webkit
Apa fungsi dari properti animationName Style DOM pada HTML?
BalasHapusProperti animationName Style DOM pada HTML berfungsi untuk melakukan pengaturan atau pengembalian nilai untuk animasi @keyframes.
HapusApa yang dimaksud dengan properti animasi Style DOM pada HTML?
BalasHapusProperti animasi merupakan properti singkatan untuk enam jenis properti animasi lainnya, yaitu:
Hapus1. animationName
2. animationDuration
3. animationTimingFunction
4. animationDelay
5. animationIterationCount
6. animationDirection
Catatan: selalu tentukan nilai properti animationDuration terlebih dahulu, jika tidak maka nilai durasinya adalah 0, atau dengan kata lain animasi tidak akan pernah diputar.