6 Value Properti animationFillMode Style DOM pada HTML

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.

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.

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>

Komentar

  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

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