8 Value Properti Animasi Style DOM pada HTML

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.

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.

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: 350px;top: 0px;}

to {left: 350px;top: 200px;}

}

 

@keyframes MKN_Move_1 {

from {left: 250px;}

to {left: 500px;}

}

 

@keyframes MKN_Move_2 {

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

to {left: 350px;top: 200px;}

}

</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>

Output:

Klik tombol untuk mengubah animasi.

MKN


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>

Output:

Klik tombol untuk mengubah animasi.

DND

Komentar

  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

Posting Komentar

*Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung. :D

*Jika terdapat typo, link bermasalah, dan lain sebagainya, pengunjung dapat melaporkan permasalahan tersebut melalui WA: +62-896-2514-6106




~ Ikatlah Ilmu dengan Memostingkannya ~

Referensi Tambahan:

Enkapsulasi pada Java

2 Jenis Utama Kegiatan Penelitian Berdasarkan Waktunya, Crosssectional Salah Satunya

6 Contoh Program Method Overloading pada Java

3 Jenis Utama Looping pada Java

Perbedaan stdio.h dan stdlib.h pada Bahasa C