3 Value Properti animationDuration Style DOM pada HTML

Properti Style animationDuration DOM pada HTML digunakan untuk mengatur waktu interval ketika memenuhi satu putaran dari suatu animasi.

Sintak:
  • Berfungsi untuk mengembalikan properti animationDuration: object.style.animationDuration
  • Berfungsi untuk mengaktur properti animationDuration: object.style.animationDuration = "time|initial|inherit"

Return Value: berfungsi untuk mengembalikan sebuah string yang merepresentasikan properti animationDuration dari suatu elemen.

Property Value:
  • time: digunakan untuk menentukan panjang dari waktu dimana animasi menyelesaikan satu putaran, dengan nilai default-nya adalah 0 dan tidak akan ada animasi apapun yang akan ditampilkan pada layar monitor.
  • initial: digunakan untuk mengatur style properti animationDuration ke nilai default-nya.
  • inherit: berfungsi untuk inherit style properti animationDuration yang berasal dari parent-nya.

Vendor Prefiks: untuk kompatibilitas ke banyak web developer maka dapat ditambahkan esktensi pada browser secara spesifik seperti -webkit- untuk browser jenis Safari, Google Chrome, dan Opera, -ms- untuk Internet Explorer, -moz- untuk Firefox, -o- untuk versi lama dari opera, dan web browser lainnya. Jika browser tidak bisa mendukung penggunaan jenis ekstensi apapun, maka secara sederhana properti animationDuration akan diabaikan.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti HTML DOM Style 

animationDuration

</title>

 

<style>

div 

{

width: 100px;

height: 100px;

background:#32CD32;

position: relative;

/* Untuk browser Chrome, 

Safari, dan Opera. */

/* nama animasi adalah Bons */

/* iterasi infinite animasi */

-webkit-animation: Bons 5s infinite;

animation: Bons 5s infinite;

}

 

/* Digunakan untuk Chrome, 

Safari, dan Opera. */

@-webkit-keyframes Bons 

{

from {left: 0px;

top:20px;}

 

to {left: 300px;

top:20px;}

}

 

@keyframes Bons 

{

from {left: 0px;

top:20px;}

 

to {left: 300px;

top:20px;}

}

</style>

 

</head>

 

<body>

 

<button 

onclick = "myBons()">

Klik tombol untuk menambah 

kecepatan durasi dari animasi.

</button>

 

<script>

function myBons() 

{

/* Untuk browser Chrome, 

Safari, dan Opera. */

document.getElementById("MNN").style.WebkitAnimationDuration = "1s";

 

document.getElementById("MNN").style.animationDuration = "1s";

}

</script>

 

<div 

id = "MNN">

Blog Elfan

</div>

 

</body>

 

</html>


Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti HTML DOM Style 

animationDuration

</title>

 

<style>

div 

{

width: 100px;

height: 100px;

background:#32CD32;

position: relative;

/* Untuk Browser Chrome, 

Safari, dan Opera. */

/* iterasi infinite animasi. */

-webkit-animation: mymove 5s infinite;

animation: mymove 5s infinite;

}

 

/* Chrome, Safari, Opera */

@-webkit-keyframes mymove 

{

from {left: 0px;

background-color: white;}

 

to {left: 200px;

background-color: #32CD32;}

}

 

@keyframes myanim 

{

from {left: 0px;

background-color: white;}

 

to {left: 200px;

background-color: #32CD32;}

}

</style>

 

</head>

 

<body>

 

<button 

onclick = "myBons()">

Klik tombol untuk menambah 

kecepatan durasi dari animasi.

</button>

 

<script>

function myBons() 

{

document.getElementById("DDM").style.WebkitAnimationDuration

= "1s";

 

document.getElementById("DDM").style.animationDuration = "1s";

}

</script>

 

<div 

id = "DDM">

Properti animation-duration

</div>

 

</body>

 

</html>

Komentar

  1. Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti animationDuration Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser populer yang dapat digunakan untuk mengaktifkan properti animationDuration Style DOM pada HTML:
      1. Firefox 16.0, 5.0 -moz-
      2. Opera 30.0
      3. Google Chrome 43.0
      4. Safari 9.0

      Hapus
  2. Apa fungsi dari properti animationDuration Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti animationDuration Style DOM pada HTML digunakan untuk menentukan berapa detik atau berapa milidetik yang dibutuhkan suatu animasi untuk menyelesaikan satu siklus.

      Hapus
    2. Properti animationDuration Style DOM pada HTML digunakan untuk menentukan lamanya waktu yang dibutuhkan suatu animasi untuk meneylesaikan siklus perputaran.

      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