Mengatur Transisi Animasi HTML Menggunakan Animation Style DOM
- Digunakan untuk mengembalikan properti animasi: object.style.animation
- Digunakan untuk mengatur properti animasi: object.style.animation=" name duration timingFunction delay iterationCount direction fillMode playState "
Value Properti:
- animationName: Digunakan untuk mendeskripsikan nama dari keyframe terlampir ke selector.
- animationDuration: Digunakan untuk mendeskripsikan berapa lama waktu animasi dijalankan.
- animationTimingFunction: Digunakan untuk mendeskripsikan kecepatan dari animasi.
- animationDelay: Digunakan untuk mendeskripsikan waktu penundaan sebelum animasi mulai dijalankan.
- animationIterationCount: Digunakan untuk mendeskripsikan angka dari waktu animasi yang digunakan.
- animationDirection: Digunakan untuk mendeskripsikan apakah animasi bisa di play secara reverse dari perputaran alternatifnya.
- animationFillMode: Digunakan untuk mendeskripsikan nilai apa yang didapatkan ketika apply saat animasi berhenti.
- animationPlayState: Digunakan untuk mendeskripsikan apakah animasi dapat dijalankan atau dihentikan.
<!DOCTYPE html>
<html>
<head>
<style>
#MKN
{
width: 90px;
height: 90px;
background: green;
color: white;
position: relative;
text-align: center;
/* -webkit- digunakan untuk
browser safari */
-webkit-animation: MKN_Move_1 1s infinite;
animation: MKN_Move_1 1s infinite;}
/* digunakan untuk browser
Opera, Chrome, dan Safari */
@-webkit-keyframes MKN_Move_1
{
from {left: 250px;}
to {left: 500px;}}
/* digunakan untuk browser
Opera, Chrome, dan Safari */
@-webkit-keyframes MKN_Move_2 {
from {left: 50px;top: 0px;}
to {left: 50px;top: 20px;}
}
@keyframes MKN_Move_1 {
from {left: 20px;}
to {left: 50px;}
}
@keyframes MKN_Move_2 {
from {left: 35px;top: 0px;}
to {left: 35px;top: 20px;}
}
</style>
</head>
<body align="center">
<button
onclick = "myBons()">
Change Animation
</button>
<p>
Klik tombol untuk mengubah
animasi.
</p>
<script>
function myBons()
{
/* Kode ini dapat dijalankan
pada brower Safari */
document.getElementById("MKN").style.WebkitAnimation
= "MKN_Move_2 4s 2";
document.getElementById("MKN").style.animation
= "MKN_Move_2 4s 2";
}
</script>
<div id="MKN">
MKN
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
Properti HTML DOM Style animation
</title>
<style>
#DND
{
width: 90px;
height: 90px;
background: green;
position: relative;
color: white;
text-align: center;
/* Untuk browser Opera,
Chrome, dan Safari*/
-webkit-animation: DND_Move_1 1s infinite;
animation: DND_Move_1 1s infinite;
}
/* Untuk browser Opera,
Chrome, dan Safari*/
@-webkit-keyframes DND_Move_1 {
from {left: 0px;}
to {left: 90px;}
}
/* Untuk browser Opera,
Chrome, dan Safari */
@-webkit-keyframes DND_Move_2 {
from {top: 0px;
background: green;
width: 100px;}
to {top: 200px;
background: yellow;
width: 150px;
height: 150px;}
}
@keyframes DND_Move_1 {
from {left: 0px;}
to {left: 95px;}
}
@keyframes DND_Move_2 {
from {
top: 0px;
background: green;
width: 100px;}
to {top: 200px;
background: yellow;
width: 150px;
height: 150px;}
}
</style>
</head>
<body
align="center">
<button
onclick="myBOns()">
Change Animation
</button>
<p>
Klik tombol untuk mengubah
animasi.
</p>
<script>
function myBOns()
{
/* Untuk browser Opera,
Chrome, dan Safari */
document.getElementById("DND").style.WebkitAnimation
= "DND_Move_2 4s 2";
document.getElementById("DND").style.animation
= "DND_Move_2 4s 2";
}
</script>
<div id = "DND">
DND
</div>
</body>
</html>
- 4 Nilai Properti animationIterationCount Style DOM pada HTML
- 4 Value Properti animationName Style DOM pada HTML
- 8 Value Properti animationTimingFunction Style DOM pada 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
5 komentar untuk "Mengatur Transisi Animasi HTML Menggunakan Animation 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 -
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti style animasi DOm pada HTML?
BalasHapusBerikut adalah beberapa jenis browser populer yang dapat digunakan untuk mengaktifkan properti animasi style dom pada HTML:
Hapus1. Google Chrome 43.0, 4.0 -webkit-
2. Internet Explorer 10.0
3. Mozilla firefox 16.0, 5.0 -moz-
4. Opera 30.0, 15.0 -webkit-, 12.1, 12.0 -o-
5. Safari 9.0, 4.0 -webkit-
Apa yang dimaksud dengan properti style animasi DOM pada HTML?
BalasHapusStyle animasi CSS memungkan user untuk menganimasikan transisi properti dari suatu elemen. Tidak hanya itu, animasi style juga memungkinkan untuk user menggunakan properti animasi guna menentukan style yang sesuai dengan keinginan.
HapusProperti style animasi juga dapat digabungkan dengan beberapa jenis propeti lain seperti animation-name, animation-duration, animation-iteration-count, dan lain sebagainya.
Hapus