Properti animationFillMode HTML Style DOM dan Fungsinya
- 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>
<!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>
- 10 Contoh Properti Background Style DOM pada HTML
- 5 Contoh Penggunaan Properti backgroundAttachment Style DOM pada HTML
- 4 Parameter Properti backgroundColor Style DOM pada HTML
- 4 Contoh Penggunaan Properti backgroundImage Style DOM pada HTML
- 5 Contoh Penggunaan Properti backgroundPosition Style DOM pada HTML
- 4 Value Properti backgroundRepeat Style DOM pada HTML
- 3 Value Properti backgroundClip Style DOM pada HTML
7 komentar untuk "Properti animationFillMode HTML Style DOM dan Fungsinya"
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 -
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti animationFillMode Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti animationFilMode Style DOM pada HTML:
Hapus1. Google Chrome 43.0
2. Firefox 16.0
3. Opera 30.0
Apa fungsi dari properti animationFillMode Style DOM pada HTML?
BalasHapusProperti 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.
HapusProperti 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.
HapusApa manfaat dari penggunaan properti animationFillMode Style DOM pada HTML?
BalasHapusProperti ini sangat berguna dalam pengaturan style animasi css ke elemen sebelum animasi tersebut mulai dijalankan atau setelah animasi selesai dijalankan.
Hapus