Menghitung Perulangan Animasi HTML animationIterationCount Style DOM
 |
| Ilustrasi animationIterationCount HTML |
- digunakan untuk mengembalikan properti animationIterationCount: object.style.animationIterationCount
- digunakan untuk mengatur properti animationIterationCount: object.style.animationIterationCount = "number|infinite|initial|inherit"
Property Values:
- number: digunakan untuk mengatur seberapa banyak waktu yang dibutuhkan animasi untuk dimainkan, dengan nilai default-nya adalah 1.
- infinite: digunakan untuk mengatur animasi yang akan dimainkan dalam waktu tak terbatas.
- initial: digunakan untuk mengatur properti animationIterationCount terhadap nilai default-nya.
- inherit: nilai properti ini diturunkan dari nilai elemen parent-nya.
<!DOCTYPE html>
<html>
<head>
<title>
Properti HTML DOM Style
animationIterationCount
</title>
<style>
div
{
width: 80px;
height: 80px;
background: lightgreen;
position: relative;
/* Untuk browser Chrome,
Safari, dan Opera. */
-webkit-animation: mymove 2s 1;
animation: mymove 2s 1;}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
from {left: 0px;top: 0px;}
to {left: 250px;top: 250px;}
}
@keyframes mymove
{
from {left: 0px;top: 0px;}
to {
left: 250px;
top: 250px;
background-color:green;}
}
</style>
</head>
<body>
<p>
Klik tombol untuk mengatur
animasi iterasi penghitungan.
</p>
<button
onclick="myBons()">
Click Here!
</button>
<br>
<script>
/* Untuk browser Chrome,
Safari, dan Opera. */
function myBons()
{
document.getElementById("MNN").style.WebkitAnimationIterationCount
= "10";
document.getElementById("MNN").style.animationIterationCount = "10";
}
</script>
<div
id="MNN">
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
Properti HTML DOM Style
animationIterationCount
</title>
<style>
div
{
width: 200px;
height: 110px;
background: green;
text-align: center;
padding-top:50px;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation: mymove 2s 2;
animation: mymove 2s 2;}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
from {left: 400px;}
to {left: 0px;}
}
@keyframes mymove
{
from {left: 400px;}
to {left: 0px;}
}
</style>
</head>
<body>
<p>
Klik tombol untuk mengatur
penghitungan animasi iterasi!
</p>
<button
onclick="myBonns()">
Click Here!
</button>
<br>
<script>
function myBonns()
{
/* Untuk browser Chrome,
Safari, dan Opera. */
document.getElementById("MMN").style.WebkitAnimationIterationCount
= "infinite";
document.getElementById("MMN").style.animationIterationCount
= "infinite";
}
</script>
<br>
<div
id="MMN">
Properti Style
animationIterationCount
</div>
</body>
</html>
- 5 Contoh Penggunaan Properti backgroundAttachment Style DOM pada HTML [klik]
- 4 Parameter Properti backgroundColor Style DOM pada HTML [klik]
- 4 Contoh Penggunaan Properti backgroundImage Style DOM pada HTML [klik]
- 5 Contoh Penggunaan Properti backgroundPosition Style DOM pada HTML [klik]
- 4 Value Properti backgroundRepeat Style DOM pada HTML [klik]
- 3 Value Properti backgroundClip Style DOM pada HTML [klik]
- 5 Value Properti backgroundOrigin Style DOM pada HTML [klik]
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti animationIterationCount Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti animationIterationCount Style DOM pada HTML:
Hapus1. Chrome 43.0
2. Firefox 16.0, 5.0 -moz-
3. Opera 30.0
4. Safari 9.0
Apa fungsi dari properti animationIterationCount Style DOM pada HTML?
BalasHapusProperti animationIterationCount Style DOM pada HTML digunakan untuk pengaturan atau pengembalikan nilai tentang berapa kali suatu animasi harus diputar.
HapusProperti animationIterationCount Style DOM pada HTML digunakan untuk mengatur properti atau mengembalikan nilai animasi apapun dari jumlah perhitungan siklus.
Hapus