Lompat ke konten Lompat ke sidebar Lompat ke footer

Properti animationFillMode HTML Style DOM dan Fungsinya

Properti Style animationFillMode DOM pada HTML digunakan untuk menentukan style dari elemen ketika animasi tidak dimainkan atau ketika animasi telah selesai dimainkan, atau ketika animasi sedang delay. Properti animationFillMode dapat melakukan override behavior default dari animasi CSS dengan menggunakan efek animasi CSS elemen ketika keyframe pertama adalah statusnya adalah "played" dan akan berhenti ketika efeknya telah mencapai keyframe terakhir atau telah selesai.

6 Value Properti animationFillMode Style DOM pada HTML
Ilustrasi animationFIllMode HTML

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

Sintak:
  • Berfungsi untuk mengembalikan properti animationFillMode: object.style.animationFillMode;
  • Berfungsi untuk mengatur properti animationFillMode: object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit";

Return Values: berfungsi untuk mengembalikan sebuah string yang merepresentasikan properti animation-fill-mode dari suatu elemen.

Property values:
  • none: tidak akan menerapkan bentuk style apapun kepada target sebelum atau setelah target tersebut dieksekusi.
  • forwards: menerapkan nilai properti untuk waktu animasi berakhir.
  • backwards: menerapkan nilai properti yang didefinisikan pada keyframe yang memulai iterasi pertama dari animasi selama periode pendefinisian oleh animation-delay.
  • both: menerapkan nilai properti untuk forward dan backward ke animasi.
  • initial: mengatur properti ke nilai default-nya.
  • inherit: properti menerima inherit dari parent-nya.

Pendekatan: Elemen <div> mendapatkan nilai style yang diatur oleh keyframe pertama sebelum animasi dimulai selama periode waktu delay.

Baca Juga:

Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<style>

div 

{

width: 50px;

height: 50px;

background: green;

position: relative;

-webkit-animation: animate 2s 1;

/* Chrome, Safari, Opera */

animation: animate 2s 2;}

 

/* Chrome, Safari, Opera */

@-webkit-keyframes animate 

{

from {left: 500px;}

to {left: 0px;}

}

 

@keyframes animate 

{

from {left: 500px;}

to {left: 0px;}

}

</style>

 

</head>

 

<body>

 

<p>

Klik tombol "Try it" untuk 

membuat elemen DIV tetap 

menjaga style yang diatur oleh 

keyframe terakhir ke tipe 

{left:0px;}, ketika animasi 

telah selesai dijalankan.

</p>

 

<button 

onclick="myFunction()">

Try it

</button>

 

<script>

function myFunction() 

{

// Kode program untuk Chrome, 

// Safari, and Opera

document.getElementById(

"div1").style.WebkitAnimationFillMode =

"backwards";

 

document.getElementById(

"div1").style.animationFillMode =

"backwards";

}

</script>

 

<div 

id="div1">

</div>

 

</body>

 

</html>


Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<style>

div 

{

width: 50px;

height: 50px;

background: green;

position: relative;

-webkit-animation: animate 2s 1;

/* Chrome, Safari, Opera */

animation: animate 2s 2;}

 

/* Chrome, Safari, Opera */

@-webkit-keyframes animate 

{

from {left: 0px;}

to {left: 500px;}

}

 

@keyframes animate 

{

from {left: 0px;}

to {left: 500px;}

}

</style>

 

</head>

 

<body>

 

<p>

Klik tombol "Try it" untuk 

membiarkan elemen DIV menjaga 

style yang diatur oleh 

keyframe terakhir ke 

{left:500px;}, ketika animasi 

telah selesai dijalankan.

</p>

 

<button 

onclick="myFunction()">

Try it

</button>

 

<script>

function myFunction() 

{

// Kode program untuk Chrome, 

// Safari, and Opera

document.getElementById(

"div1").style.WebkitAnimationFillMode =

"forwards";

 

document.getElementById(

"div1").style.animationFillMode =

"forwards";

}

</script>

 

<div 

id="div1">

</div>

 

</body>

 

</html>


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

7 komentar untuk "Properti animationFillMode HTML Style DOM dan Fungsinya"

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

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti animationFilMode Style DOM pada HTML:
      1. Google Chrome 43.0
      2. Firefox 16.0
      3. Opera 30.0

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

    BalasHapus
    Balasan
    1. Properti animationFillMode Style DOM pada HTML digunakan untuk menentukan style atau gaya apa yang akan diterapkan pada elemen ketika animasi sedang tidak diputar atau ketika animasi telah selesai dijalankan atau penundaan.

      Hapus
    2. Properti animationFillMode Style DOM pada HTML digunakan untuk menentukan bagaimana style diterapkan di luar waktu eksekusi yaitu setelah selesai atau jika dilakukan penundaan pada perputaran animasi.

      Hapus
  3. Apa manfaat dari penggunaan properti animationFillMode Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti ini sangat berguna dalam pengaturan style animasi css ke elemen sebelum animasi tersebut mulai dijalankan atau setelah animasi selesai dijalankan.

      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 -