Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengatur Durasi Animasi HTML Menggunakan animationDuration Style DOM

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

3 Value Properti animationDuration Style DOM pada HTML
Ilustrasi animationDuration HTML

Sebelum memahami lebih dalam materi tentang Mengatur Durasi Animasi HTML Menggunakan animationDuration Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Arah Animasi HTML Menggunakan animationDirection Style DOM [klik], Mengatur Jeda Animasi HTML Menggunakan animationDelay Style DOM [klik], dan Mengatur Transisi Animasi HTML Menggunakan Animation Style DOM [klik].

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

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

Property Values:
  • 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.

Baca Juga:

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>


Artikel ini didedikasikan kepada: Devi Saputri, Dewi Kartikasari, Dewi Mustikasari, Dhea Khairunnisa Putri, dan Dhita Citra Mardyana.

5 komentar untuk "Mengatur Durasi Animasi HTML Menggunakan animationDuration Style DOM"

  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

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 -