3 Value Properti animationDelay Style DOM pada HTML

Properti Style animationDelay DOM pada HTML digunakan untuk mengembalikan atau mengatur waktu delay setelah animasi dimulai.

Sintak:
  • digunakan untuk mengatur properti animationDelay: object.style.animationDelay = "time|initial|inherit"
  • digunakan untuk mengembalikan nilai properti animationDelay: object.style.animationDelay

Property Value:
  • time: digunakan untuk mendefinisikan angka dari ukuran detik atau milidetik untuk delay animasi, dengan nilai default-nya adalah 0.
  • initial: digunakan untuk mengatur properti pada nilai default.
  • inherit: digunakan untuk inherit properti dari properti parent-nya.

Return Value: berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan properti animation-delay dari suatu elemen.

Contoh: delay 3 detik pada animasi menggunakan nilai properti waktu.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti HTML DOM animationDelay

</title>

 

<style>

div 

{

width: 100px;

height: 100px;

background: green;

position: relative;

-webkit-animation: move_1 2s infinite;

/* Untuk browser Chrome, 

Safari, dan Opera */

animation: move_1 2s infinite;}

 

/* Untuk browser Chrome, 

Safari, dan Opera */

@-webkit-keyframes move_1 

{

from {left: 150px;}

to {left: 350px;}

}

 

@keyframes move_1 

{

from {left: 150px;}

to {left: 350px;}

}

 

/* Untuk browser Chrome, 

Safari, dan 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 animationDelay

</h2>

 

<button 

onclick="Bons()">

Click Here

</button>

 

<br>

<br>

 

<div 

id="MKN_DIV">

</div>

 

<script>

function Bons() 

{

// Mengubah nama animasi.

document.getElementById(

"MKN_DIV").style.WebkitAnimationName =

"move_2";

 

// Untuk browser Chrome, 

// Safari, dan Opera

document.getElementById(

"MKN_DIV").style.animationName =

"move_2";

 

// Menguba delay animasi.

document.getElementById(

"MKN_DIV").style.WebkitAnimationDelay =

"3s";

 

// Untuk browser Chrome, 

// Safari, dan Opera

document.getElementById(

"MKN_DIV").style.animationDelay =

"3s";

}

</script>

 

</body>

 

</html>


Contoh: delay 3 detik pada animasi.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti HTML DOM animationDelay

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

</h2>

 

<button 

onclick="Bnns()">

Click Here

</button>

 

<br>

<br>

 

<div 

id="MNN_DIV">

</div>

 

<script>

function Bnns() 

{

// Mengubah nama animasi.

document.getElementById(

"MNN_DIV").style.WebkitAnimationName =

"move_2";

 

// Untuk Browser Chrome, 

// Safari, dan Opera

document.getElementById(

"MNN_DIV").style.animationName =

"move_2";

 

// Mengubah delay animasi.

document.getElementById(

"MNN_DIV").style.WebkitAnimationDelay =

"3s";

 

// Untuk Browser, Safari, dan 

// Opera

document.getElementById(

"MNN_DIV").style.animationDelay =

"3s";

}

</script>

 

</body>

 

</html>

Komentar

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

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

      Hapus
  2. Apa fungsi animationDelay Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti animationDelay Style DOM pada HTML berfungsi untuk menentukan kapan suatu animasi akan dimulai atau akan ditunda. Nilai animationDelay didefinisikan dalam satu detik atau milidetik.

      Catatan: penggunaan nilai negatif pada properti ini adalah diperbolehkan, seperti -2s akan akan memnuat animasi mulai sekaligus, tetapi akan dimulai 2 detik penundaan terlebih dahulu sebelum animasi dimulai.

      Hapus
    2. Properti animationDelay pada style DOM HTML digunakan untuk pengaturan atau penentuan nilai pengembalian waktu delay setelah animasi tersebut dimulai.

      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