Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengatur Transisi Waktu HTML Menggunakan transitionTimingFunction Style DOM

Properti Style transitionTimingFunction DOM pada HTML merupakan properti yang memungkinkan pengguna untuk melakukan sebuah transisi efek untuk mempercepat waktu durasinya. Efek transisi menyediakan sebuah jalan untuk mengendalikan kecepatan animasi ketika properti berubah.

Sebelum memahami lebih dalam materi tentang Mengatur Transisi Waktu HTML Menggunakan transitionTimingFunction Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Durasi Transisi HTML Menggunakan transitionDuration Style DOM [klik], Mengatur Efek Transisi HTML Menggunakan transitionProperty Style DOM [klik], dan Mengatur Gaya Transisi HTML Menggunakan Style Transition DOM [klik].

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.

Baca Juga:

Property Values:
  • 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>

Output:




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>

Output:




Catatan: gunakan WebkitTransitionTimingFunction sebagai keyword penggunaan properti efek transisi pada browser Safari.

Artikel ini didedikasikan kepada: Imanuel Dimas Cahyo Kumoro, Inayah Dwi Cahyaningrum, Indrakila Prabowo, Intan Iswara, dan Intan Putri Amarilis.

5 komentar untuk "Mengatur Transisi Waktu HTML Menggunakan transitionTimingFunction Style DOM"

  1. Jenis browser seperti apa yang bisa digunakan untuk mengaktifkan properti WebkitTransitionTimingFunction Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut ini beberapa jenis browser yang bisa digunakan untuk mengaktifkan properti WebkitTransitionTimingFunction Style DOM pada HTML:
      1. 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

      Hapus
  2. Apa yang dimaksud dengan properti TranstionTimingFunction Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti TransitionTimingFunction Style DOM pada HTML merupakan properti yang digunakan untuk menentukan kurva kecepatan dari efek transisi.

      Hapus
    2. Properti TransitionTimingFunction Style DOM adalah properti yang memungkinkan untuk memberikan efek transisi untuk mengubah kecepatan selama proses durasinya.

      Hapus

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 -