DAFTAR LABEL POPULER PENELITIAN.ID

Jangan Buka Artikel Ini!

Mengatur Jeda Animasi HTML Menggunakan animationDelay Style DOM

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


3 Value Properti animationDelay Style DOM pada HTML
Ilustrasi animationDelay HTML

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

Property Values:
  • 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 Values: berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan properti animation-delay dari suatu elemen.

Baca Juga:

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

Hubungi admin melalui Wa : +62-896-2514-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 ~

Postingan populer dari blog ini (30 Hari)

Specifier %d dan %i Bahasa C dan Fungsinya

Enkapsulasi Java dan Fungsinya

4 Kesalahan Umum yang Sering Terjadi pada PTK

Cara Membuat Drag and Drop pada HTML

Postingan populer dari blog ini (All Time)

Enkapsulasi Java dan Fungsinya

Komunitas