DAFTAR LABEL POPULER PENELITIAN.ID

Jangan Buka Artikel Ini!

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.

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:


5 Value Properti transitionTimingFunction Style DOM pada HTML
transitionTimingFunction Style DOM

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.

Komentar

  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

Posting Komentar

Hubungi admin melalui Wa : +62-896-2514-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 ~

Postingan populer dari blog ini (30 Hari)

Specifier %d dan %i Bahasa C dan Fungsinya

Enkapsulasi Java dan Fungsinya

4 Kesalahan Umum yang Sering Terjadi pada PTK

Cara Membuat Drag and Drop pada HTML

Postingan populer dari blog ini (All Time)

Enkapsulasi Java dan Fungsinya

Komunitas