Mengatur Transisi Waktu HTML Menggunakan transitionTimingFunction Style DOM
 |
| transitionTimingFunction Style DOM |
Sintak:
- untuk mengatur nilai properti: object.style.transitionTimingFunction = "ease | linear | ease-in | ease-out | ease-in-out"
- untuk mendapatkan nilai properti: object.style.transitionTimingFunction
Return Values: berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan properti transition-timing-function dari suatu elemen.
- ease: menentukan sebuah efek transisi yang dimulai dari slow, fast, dan kembali slow.
- linear: menentukan sebuah efek transisi dengan kecepatan yang sama dari awal hingga akhir dari animasi.
- ease-in: menentukan sebuah efek transisi dengan awalan yang lambat.
- ease-out: menentukan sebuah efek transisi dengan akhiran yang lambat.
- ease-in-out: menentukan sebuah efek transisi dengan awalan dan akhiran yang lambat.
Contoh: mendeskripsikan nilai properti linear.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style
transitionTimingFunction DOM
pada HTML
</title>
<style>
#BNN1
{
background-color: green;
width: 150px;
height: 150px;
overflow: auto;
/* Untuk Browser Safari */
-webkit-transition: all 2s;
transition: all 2s;
}
#BNN1:hover
{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<button
onclick = "myBon1s()">
Click Here!
</button>
<br>
<br>
<div
id = "BNN1">
</div>
<script>
function myBon1s()
{
/* Untuk Browser Safari */
document.getElementById("BNN1").style.WebkitTransitionTimingFunction
= "linear";
document.getElementById("BNN1").style.transitionTimingFunction
= "linear";
}
</script>
</body>
</html>
Contoh: mendeskripsikan nilai properti ease-in.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style
transitionTimingFunction DOM
pada HTML
</title>
<style>
#MKK2
{
background-color: green;
width: 150px;
height: 150px;
overflow: auto;
/* Untuk Browser Safari */
-webkit-transition: all 2s;
transition: all 2s;
}
#MKK2:hover
{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<button
onclick = "myDon2s()">
Click Here!
</button>
<br>
<br>
<div
id = "MKK2">
</div>
<script>
function myDon2s()
{
/* Untuk Browser Safari */
document.getElementById("MKK2").style.WebkitTransitionTimingFunction
= "ease-in";
document.getElementById("MKK2").style.transitionTimingFunction
= "ease-in";
}
</script>
</body>
</html>
Catatan: gunakan WebkitTransitionTimingFunction sebagai keyword penggunaan properti efek transisi pada browser Safari.
- 5 Value Properti Visibility Style DOM pada HTML [klik]
- 5 Value Properti Width Style DOM pada HTML [klik]
- 5 Value Properti wordBreak Style DOM pada HTML [klik]
- 4 Value Properti wordSpacing Style DOM pada HTML [klik]
- 4 Value Properti wordWrap Style DOM pada HTML [klik]
- 4 Value Properti zIndex Style DOM pada HTML [klik]
- Penggunaan Properti window.closed DOM pada HTML [klik]
Jenis browser seperti apa yang bisa digunakan untuk mengaktifkan properti WebkitTransitionTimingFunction Style DOM pada HTML?
BalasHapusBerikut ini beberapa jenis browser yang bisa digunakan untuk mengaktifkan properti WebkitTransitionTimingFunction Style DOM pada HTML:
Hapus1. Google Chrome 26.0
2. Internet Explorer 10.0
3. Mozilla Firefox 16.0
4. Opera 12.1
5. Safari 6.1, 3.1 WebkitTransitionTimingFunction
Apa yang dimaksud dengan properti TranstionTimingFunction Style DOM pada HTML?
BalasHapusProperti TransitionTimingFunction Style DOM pada HTML merupakan properti yang digunakan untuk menentukan kurva kecepatan dari efek transisi.
HapusProperti TransitionTimingFunction Style DOM adalah properti yang memungkinkan untuk memberikan efek transisi untuk mengubah kecepatan selama proses durasinya.
Hapus