คุณสมบัติ transitionTimingFunction ของ Style ใน HTML DOM

คุณสมบัติ transitionTimingFunction ของ Style ใน HTML DOM ใช้สำหรับอ่านหรือตั้งค่าฟังก์ชันที่แสดงความเร็วของเอฟเฟกต์ transition ของเอลิเมนต์

รูปแบบการใช้งาน (Syntax)

1. อ่านค่า transitionTimingFunction

object.transitionTimingFunction

2. ตั้งค่า transitionTimingFunction

object.transitionTimingFunction = "ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() | initial | inherit"

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<style>
  body {
    color: #000;
    height: 100vh;
  }
  .btn {
    background: #db133a;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 40%;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
    margin: 1rem 0;
  }
  .circle {
    height: 100px;
    width: 100px;
    background-color: #db133a;
  }
  .circle:hover {
    height: 200px;
    width: 200px;
    border-radius: 50%;
    transition: all 2s;
  }
  .show {
    font-size: 1.2rem;
    margin: 1rem 0;
  }
</style>
<body>
<h1>ตัวอย่างคุณสมบัติ transitionTimingFunction ของ Style</h1>
<div class='circle'></div>
<button onclick="set()" class="btn">ตั้งค่า transitionTimingFunction</button>
<div class="show">ตอนนี้ลอง hover ที่สี่เหลี่ยมดู</div>
<script>
  function set() {
    document.querySelector('.circle').style.transitionTimingFunction = "ease-in-out";
  }
</script>
</body>
</html>

ผลลัพธ์

คลิกที่ปุ่ม "ตั้งค่า transitionTimingFunction" แล้วลอง hover ที่ "สี่เหลี่ยมสีแดง" เพื่อดูเอฟเฟกต์ transitionTimingFunction