Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengatur Transisi Animasi HTML Menggunakan Animation Style DOM

Properti Style animasi pada DOM HTML digunakan untuk pembuatan transisi animasi dari satu CSS Style ke CSS Style lainnya. Properti Style animasi berfungsi untuk mengkonfigurasi waktu, delay, durasi, dan rincian lainnya dari urutan progres animasi dibuat. Animasi mengandung dua komponen utama, yaitu komponen deskripsi CSS dan lainnya adalah sekumpulan keyframe yang mengindikasikan awalan dan akhiran dari penggunaan states styles.

8 Value Properti Animasi Style DOM pada HTML
Ilustrasi Animasi Style HTML

Sebelum memahami lebih dalam materi tentang Mengatur Transisi Animasi HTML Menggunakan Animation Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Nilai Rataan Item HTML Menggunakan alignSelf Style DOM [klik], Mengatur Item Rataan HTML Menggunakan alignItems Style DOM [klik], dan Menentukan Nilai Rataan Teks HTML alignContent Style DOM [klik].

Sintak:
  • digunakan untuk mengembalikan properti animasi: object.style.animation
  • digunakan untuk mengatur properti animasi: object.style.animation="name duration timingFunction delay iterationCount direction fillMode playState"

Value Properti:
  • animationName: digunakan untuk mendeskripsikan nama dari keyframe terlampir ke selector.
  • animationDuration: digunakan untuk mendeskripsikan berapa lama waktu animasi dijalankan.
  • animationTimingFunction: digunakan untuk mendeskripsikan kecepatan dari animasi.
  • animationDelay: digunakan untuk mendeskripsikan waktu penundaan sebelum animasi mulai dijalankan.
  • animationIterationCount: digunakan untuk mendeskripsikan angka dari waktu animasi yang digunakan.
  • animationDirection: digunakan untuk mendeskripsikan apakah animasi bisa di play secara reverse dari perputaran alternatifnya.
  • animationFillMode: digunakan untuk mendeskripsikan nilai apa yang didapatkan ketika apply saat animasi berhenti.
  • animationPlayState: digunakan untuk mendeskripsikan apakah animasi dapat dijalankan atau dihentikan.

Return Values: digunakan untuk mengembalikan sebuah nilai string yang merepresentasikan properti animasi dari suatu elemen.

Baca Juga:

Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<style>

#MKN 

{

width: 90px;

height: 90px;

background: green;

color: white;

position: relative;

text-align: center;

/* -webkit- digunakan untuk 

browser safari */

-webkit-animation: MKN_Move_1 1s infinite;

animation: MKN_Move_1 1s infinite;}

 

/* digunakan untuk browser 

Opera, Chrome, dan Safari */

@-webkit-keyframes MKN_Move_1 

{

from {left: 250px;}

to {left: 500px;}}

 

/* digunakan untuk browser 

Opera, Chrome, dan Safari */

@-webkit-keyframes MKN_Move_2 {

from {left: 50px;top: 0px;}

to {left: 50px;top: 20px;}

}

 

@keyframes MKN_Move_1 {

from {left: 20px;}

to {left: 50px;}

}

 

@keyframes MKN_Move_2 {

from {left: 35px;top: 0px;}

to {left: 35px;top: 20px;}

}

</style>

 

</head>

 

<body align="center">

 

<button 

onclick = "myBons()">

Change Animation

</button>

 

<p>

Klik tombol untuk mengubah 

animasi.

</p>

 

<script>

function myBons() 

{

/* Kode ini dapat dijalankan 

pada brower Safari */

document.getElementById("MKN").style.WebkitAnimation

= "MKN_Move_2 4s 2";

 

document.getElementById("MKN").style.animation

= "MKN_Move_2 4s 2";

}

</script>

 

<div id="MKN">

MKN

</div>

 

</body>

 

</html>


Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti HTML DOM Style animation

</title>

 

<style>

#DND 

{

width: 90px;

height: 90px;

background: green;

position: relative;

color: white;

text-align: center;

 

/* Untuk browser Opera, 

Chrome, dan Safari*/

-webkit-animation: DND_Move_1 1s infinite;

animation: DND_Move_1 1s infinite;

}

 

/* Untuk browser Opera, 

Chrome, dan Safari*/

@-webkit-keyframes DND_Move_1 {

from {left: 0px;}

to {left: 90px;}

}

 

/* Untuk browser Opera, 

Chrome, dan Safari */

@-webkit-keyframes DND_Move_2 {

from {top: 0px;

background: green;

width: 100px;}

to {top: 200px;

background: yellow;

width: 150px;

height: 150px;}

}

 

@keyframes DND_Move_1 {

from {left: 0px;}

to {left: 95px;}

}

 

@keyframes DND_Move_2 {

from {

top: 0px;

background: green;

width: 100px;}

to {top: 200px;

background: yellow;

width: 150px;

height: 150px;}

}

</style>

 

</head>

 

<body 

align="center">

 

<button 

onclick="myBOns()">

Change Animation

</button>

 

<p>

Klik tombol untuk mengubah 

animasi.

</p>

 

<script>

function myBOns() 

{

/* Untuk browser Opera, 

Chrome, dan Safari */

document.getElementById("DND").style.WebkitAnimation

= "DND_Move_2 4s 2";

 

document.getElementById("DND").style.animation

= "DND_Move_2 4s 2";

}

</script>

 

<div id = "DND">

DND

</div>

 

</body>

 

</html>


Referensi Tambahan:
Artikel ini didedikasikan kepada: Denny Wahyu Pramudya, Deo Budhi Anggitlistio, Devi Anggraeni Kuastutik, Devi Saputri, dan Dewi Kartikasari.

5 komentar untuk "Mengatur Transisi Animasi HTML Menggunakan Animation Style DOM"

  1. Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti style animasi DOm pada HTML?

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser populer yang dapat digunakan untuk mengaktifkan properti animasi style dom pada HTML:
      1. Google Chrome 43.0, 4.0 -webkit-
      2. Internet Explorer 10.0
      3. Mozilla firefox 16.0, 5.0 -moz-
      4. Opera 30.0, 15.0 -webkit-, 12.1, 12.0 -o-
      5. Safari 9.0, 4.0 -webkit-

      Hapus
  2. Apa yang dimaksud dengan properti style animasi DOM pada HTML?

    BalasHapus
    Balasan
    1. Style animasi CSS memungkan user untuk menganimasikan transisi properti dari suatu elemen. Tidak hanya itu, animasi style juga memungkinkan untuk user menggunakan properti animasi guna menentukan style yang sesuai dengan keinginan.

      Hapus
    2. Properti style animasi juga dapat digabungkan dengan beberapa jenis propeti lain seperti animation-name, animation-duration, animation-iteration-count, dan lain sebagainya.

      Hapus

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 -
- Big things start from small things -