Mengatur Jeda Animasi HTML Menggunakan animationDelay Style DOM
 |
| Ilustrasi animationDelay HTML |
- digunakan untuk mengatur properti animationDelay: object.style.animationDelay = "time|initial|inherit"
- digunakan untuk mengembalikan nilai properti animationDelay: object.style.animationDelay
Property Values:
- time: digunakan untuk mendefinisikan angka dari ukuran detik atau milidetik untuk delay animasi, dengan nilai default-nya adalah 0.
- initial: digunakan untuk mengatur properti pada nilai default.
- inherit: digunakan untuk inherit properti dari properti parent-nya.
Return Values: berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan properti animation-delay dari suatu elemen.
Contoh: delay 3 detik pada animasi menggunakan nilai properti waktu.
<!DOCTYPE html>
<html>
<head>
<title>
Properti HTML DOM animationDelay
</title>
<style>
div
{
width: 100px;
height: 100px;
background: green;
position: relative;
-webkit-animation: move_1 2s infinite;
/* Untuk browser Chrome,
Safari, dan Opera */
animation: move_1 2s infinite;}
/* Untuk browser Chrome,
Safari, dan Opera */
@-webkit-keyframes move_1
{
from {left: 150px;}
to {left: 350px;}
}
@keyframes move_1
{
from {left: 150px;}
to {left: 350px;}
}
/* Untuk browser Chrome,
Safari, dan Opera */
@-webkit-keyframes move_2
{
from {
left: 270px;
width: 0px;
height: 0px;}
to {
left: 270px;
width: 100px;
height: 100px;
background: blue;}
}
@keyframes move_2
{
from {
left: 270px;
width: 0px;
height: 0px;}
to {
left: 270px;
width: 100px;
height: 100px;
background: blue;}
}
</style>
</head>
<body
style="text-align:center;">
<h1
style="color:green;">
Blog Elfan
</h1>
<h2>
Properti DOM animationDelay
</h2>
<button
onclick="Bons()">
Click Here
</button>
<br>
<br>
<div
id="MKN_DIV">
</div>
<script>
function Bons()
{
// Mengubah nama animasi.
document.getElementById(
"MKN_DIV").style.WebkitAnimationName =
"move_2";
// Untuk browser Chrome,
// Safari, dan Opera
document.getElementById(
"MKN_DIV").style.animationName =
"move_2";
// Menguba delay animasi.
document.getElementById(
"MKN_DIV").style.WebkitAnimationDelay =
"3s";
// Untuk browser Chrome,
// Safari, dan Opera
document.getElementById(
"MKN_DIV").style.animationDelay =
"3s";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
Properti HTML DOM animationDelay
</title>
<style>
div
{
width: 100px;
height: 100px;
background: green;
position: relative;
-webkit-animation: move_1 2s infinite;
/* Untuk Browser Chrome,
Safari, Opera */
animation: move_1 2s infinite;}
/* Untuk Browser Chrome,
Safari, Opera */
@-webkit-keyframes move_1
{
from {left: 150px;}
to {left: 350px;}
}
@keyframes move_1 {
from {left: 150px;}
to {left: 350px;}
}
/* Untuk Browser Chrome,
Safari, Opera */
@-webkit-keyframes move_2 {
from {
left: 270px;
width: 0px;}
to {
left: 270px;
width: 100px;
background: blue;}
}
@keyframes move_2
{
from {
left: 270px;
width: 0px;}
to {
left: 270px;
width: 100px;
background: blue;}
}
</style>
</head>
<body
style="text-align:center;">
<h1
style="color:green;">
Blog Elfan
</h1>
<h2>
Properti DOM animationDelay
</h2>
<button
onclick="Bnns()">
Click Here
</button>
<br>
<br>
<div
id="MNN_DIV">
</div>
<script>
function Bnns()
{
// Mengubah nama animasi.
document.getElementById(
"MNN_DIV").style.WebkitAnimationName =
"move_2";
// Untuk Browser Chrome,
// Safari, dan Opera
document.getElementById(
"MNN_DIV").style.animationName =
"move_2";
// Mengubah delay animasi.
document.getElementById(
"MNN_DIV").style.WebkitAnimationDelay =
"3s";
// Untuk Browser, Safari, dan
// Opera
document.getElementById(
"MNN_DIV").style.animationDelay =
"3s";
}
</script>
</body>
</html>
- 4 Value Properti animationName Style DOM pada HTML [klik]
- 8 Value Properti animationTimingFunction Style DOM pada HTML [klik]
- 4 Contoh Penggunaan Properti animationPlayState Style DOM pada HTML [klik]
- 10 Contoh Properti Background Style DOM pada HTML [klik]
- 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]
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti animationDelay Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti animationDelay Style DOM pada HTML:
Hapus1. Google Chrome: 43.0
2. Mozilla Firefox: 16.0, 5.0 moz
3. Opera: 30.0
4. Safari: 9.0
Apa fungsi animationDelay Style DOM pada HTML?
BalasHapusProperti animationDelay Style DOM pada HTML berfungsi untuk menentukan kapan suatu animasi akan dimulai atau akan ditunda. Nilai animationDelay didefinisikan dalam satu detik atau milidetik.
HapusCatatan: penggunaan nilai negatif pada properti ini adalah diperbolehkan, seperti -2s akan akan memnuat animasi mulai sekaligus, tetapi akan dimulai 2 detik penundaan terlebih dahulu sebelum animasi dimulai.
Properti animationDelay pada style DOM HTML digunakan untuk pengaturan atau penentuan nilai pengembalian waktu delay setelah animasi tersebut dimulai.
Hapus