Mengatur Durasi Animasi HTML Menggunakan animationDuration Style DOM
- Berfungsi untuk mengembalikan properti animationDuration: object.style.animationDuration
- Berfungsi untuk mengaktur properti animationDuration: object.style.animationDuration = "time|initial|inherit"
Return Values: berfungsi untuk mengembalikan sebuah string yang merepresentasikan properti animationDuration dari suatu elemen.
Property Values:
- time: digunakan untuk menentukan panjang dari waktu dimana animasi menyelesaikan satu putaran, dengan nilai default-nya adalah 0 dan tidak akan ada animasi apapun yang akan ditampilkan pada layar monitor.
- initial: digunakan untuk mengatur style properti animationDuration ke nilai default-nya.
- inherit: berfungsi untuk inherit style properti animationDuration yang berasal dari parent-nya.
Vendor Prefiks: untuk kompatibilitas ke banyak web developer maka dapat ditambahkan esktensi pada browser secara spesifik seperti -webkit- untuk browser jenis Safari, Google Chrome, dan Opera, -ms- untuk Internet Explorer, -moz- untuk Firefox, -o- untuk versi lama dari opera, dan web browser lainnya. Jika browser tidak bisa mendukung penggunaan jenis ekstensi apapun, maka secara sederhana properti animationDuration akan diabaikan.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti HTML DOM Style
animationDuration
</title>
<style>
div
{
width: 100px;
height: 100px;
background:#32CD32;
position: relative;
/* Untuk browser Chrome,
Safari, dan Opera. */
/* nama animasi adalah Bons */
/* iterasi infinite animasi */
-webkit-animation: Bons 5s infinite;
animation: Bons 5s infinite;
}
/* Digunakan untuk Chrome,
Safari, dan Opera. */
@-webkit-keyframes Bons
{
from {left: 0px;
top:20px;}
to {left: 300px;
top:20px;}
}
@keyframes Bons
{
from {left: 0px;
top:20px;}
to {left: 300px;
top:20px;}
}
</style>
</head>
<body>
<button
onclick = "myBons()">
Klik tombol untuk menambah
kecepatan durasi dari animasi.
</button>
<script>
function myBons()
{
/* Untuk browser Chrome,
Safari, dan Opera. */
document.getElementById("MNN").style.WebkitAnimationDuration = "1s";
document.getElementById("MNN").style.animationDuration = "1s";
}
</script>
<div
id = "MNN">
Blog Elfan
</div>
</body>
</html>
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti HTML DOM Style
animationDuration
</title>
<style>
div
{
width: 100px;
height: 100px;
background:#32CD32;
position: relative;
/* Untuk Browser Chrome,
Safari, dan Opera. */
/* iterasi infinite animasi. */
-webkit-animation: mymove 5s infinite;
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
from {left: 0px;
background-color: white;}
to {left: 200px;
background-color: #32CD32;}
}
@keyframes myanim
{
from {left: 0px;
background-color: white;}
to {left: 200px;
background-color: #32CD32;}
}
</style>
</head>
<body>
<button
onclick = "myBons()">
Klik tombol untuk menambah
kecepatan durasi dari animasi.
</button>
<script>
function myBons()
{
document.getElementById("DDM").style.WebkitAnimationDuration
= "1s";
document.getElementById("DDM").style.animationDuration = "1s";
}
</script>
<div
id = "DDM">
Properti animation-duration
</div>
</body>
</html>
- 4 Contoh Penggunaan Properti animationPlayState Style DOM pada 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
5 komentar untuk "Mengatur Durasi Animasi HTML Menggunakan animationDuration Style DOM"
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 animationDuration Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser populer yang dapat digunakan untuk mengaktifkan properti animationDuration Style DOM pada HTML:
Hapus1. Firefox 16.0, 5.0 -moz-
2. Opera 30.0
3. Google Chrome 43.0
4. Safari 9.0
Apa fungsi dari properti animationDuration Style DOM pada HTML?
BalasHapusProperti animationDuration Style DOM pada HTML digunakan untuk menentukan berapa detik atau berapa milidetik yang dibutuhkan suatu animasi untuk menyelesaikan satu siklus.
HapusProperti animationDuration Style DOM pada HTML digunakan untuk menentukan lamanya waktu yang dibutuhkan suatu animasi untuk meneylesaikan siklus perputaran.
Hapus