การเปลี่ยน CSS

สารบัญ

แสดงสารบัญ

การเปลี่ยน CSS

การเปลี่ยน CSS ช่วยให้คุณเปลี่ยนค่าคุณสมบัติได้อย่างราบรื่นตามระยะเวลาที่กำหนด

วางเมาส์เหนือองค์ประกอบด้านล่างเพื่อดูเอฟเฟกต์การเปลี่ยน CSS:

CSS

ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับคุณสมบัติต่อไปนี้:

transition
transition-delay
transition-duration
transition-property
transition-timing-function

การสนับสนุนเบราว์เซอร์สำหรับการเปลี่ยนภาพ

ตัวเลขในตารางระบุเบราว์เซอร์เวอร์ชันแรกที่รองรับคุณสมบัตินี้โดยสมบูรณ์

Property
transition	26.0	10.0	16.0	6.1	12.1
transition-delay	26.0	10.0	16.0	6.1	12.1
transition-duration	26.0	10.0	16.0	6.1	12.1
transition-property	26.0	10.0	16.0	6.1	12.1
transition-timing-function	26.0	10.0	16.0	6.1	12.1

จะใช้การเปลี่ยน CSS ได้อย่างไร?

หากต้องการสร้างเอฟเฟกต์การเปลี่ยนแปลง คุณต้องระบุสองสิ่ง:

คุณสมบัติ CSS ที่คุณต้องการเพิ่มเอฟเฟกต์
ระยะเวลาของผลกระทบ

หมายเหตุ: หากไม่ได้ระบุส่วนของระยะเวลา การเปลี่ยนแปลงจะไม่มีผลใดๆ เนื่องจากค่าเริ่มต้นคือ 0

ตัวอย่างต่อไปนี้แสดงองค์ประกอบ <div> สีแดงขนาด 100px * 100px <div> องค์ประกอบยังได้ระบุเอฟเฟกต์การเปลี่ยนแปลงสำหรับคุณสมบัติความกว้างด้วยระยะเวลา 2 วินาที:

ตัวอย่าง

div
{
  width: 100px;
  height: 100px;
  
background: red;
  transition: width 2s;
}

เอฟเฟกต์การเปลี่ยนแปลงจะเริ่มขึ้นเมื่อคุณสมบัติ CSS ที่ระบุ (ความกว้าง) เปลี่ยนค่า

ตอนนี้ให้เราระบุค่าใหม่สำหรับคุณสมบัติความกว้างเมื่อผู้ใช้วางเมาส์เหนือองค์ประกอบ <div>:

ตัวอย่าง

div:hover
{
  width: 300px;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>
<div></div>

</body>
</html>

โปรดสังเกตว่าเมื่อเคอร์เซอร์เลื่อนเมาส์ออกจากองค์ประกอบ จะค่อยๆ เปลี่ยนกลับไปเป็นรูปแบบดั้งเดิม

เปลี่ยนค่าทรัพย์สินหลายค่า

ตัวอย่างต่อไปนี้จะเพิ่มเอฟเฟกต์การเปลี่ยนแปลงสำหรับทั้งคุณสมบัติความกว้างและความสูงพร้อมระยะเวลา 2 วินาทีสำหรับความกว้าง และ 4 วินาทีสำหรับความสูง:

ตัวอย่าง

div
{
  transition: width 2s, height 4s;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 4s;
}

div:hover {
  width: 300px;
  height: 300px;
}
</style>
</head>
<body>

<h1>The transition Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

</body>
</html>

ระบุเส้นโค้งความเร็วของการเปลี่ยนภาพ

transition-timing-function คุณสมบัติระบุเส้นโค้งความเร็วของผลการเปลี่ยนแปลง

คุณสมบัติ transition-timing-function สามารถมีค่าต่อไปนี้:

ease: - ระบุเอฟเฟกต์การเปลี่ยนแปลงโดยเริ่มช้า จากนั้นเร็ว จากนั้นสิ้นสุดอย่างช้าๆ (นี่คือค่าเริ่มต้น)
linear: - ระบุเอฟเฟกต์การเปลี่ยนแปลงด้วยความเร็วเท่ากันตั้งแต่ต้นจนจบ
ease-in: - ระบุเอฟเฟกต์การเปลี่ยนแปลงโดยเริ่มช้า
ease-out: - ระบุเอฟเฟกต์การเปลี่ยนแปลงด้วยการสิ้นสุดที่ช้า
ease-in-out: - ระบุเอฟเฟกต์การเปลี่ยนแปลงโดยเริ่มต้นและสิ้นสุดอย่างช้าๆ
cubic-bezier(n,n,n,n): - ให้คุณกำหนดค่าของคุณเองในฟังก์ชันลูกบาศก์เบซิเยร์

ตัวอย่างต่อไปนี้แสดงเส้นโค้งความเร็วต่างๆ ที่สามารถใช้ได้:

ตัวอย่าง

#div1 {transition-timing-function: linear;}
#div2 
{transition-timing-function: ease;}
#div3 {transition-timing-function: 
ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 
{transition-timing-function: ease-in-out;}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition-timing-function Property</h1>

<p>Hover over the div elements below, to see the different speed curves:</p>

<div id="div1">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div><br>

</body>
</html>

ชะลอผลการเปลี่ยนแปลง

transition-delay คุณสมบัติระบุความล่าช้า (เป็นวินาที) สำหรับผลการเปลี่ยนแปลง

ตัวอย่างต่อไปนี้มีความล่าช้า 1 วินาทีก่อนเริ่มต้น:

ตัวอย่าง

div {
  
transition-delay: 1s;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 3s;
  transition-delay: 1s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition-delay Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

</body>
</html>

การเปลี่ยนแปลง + การเปลี่ยนแปลง

ตัวอย่างต่อไปนี้จะเพิ่มเอฟเฟกต์การเปลี่ยนแปลงให้กับการเปลี่ยนแปลง:

ตัวอย่าง

div {
  transition: 
width 2s, height 2s, transform 2s;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 2s, transform 2s;
}

div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(180deg);
}
</style>
</head>
<body>

<h1>Transition + Transform</h1>

<p>Hover over the div element below:</p>

<div></div>

</body>
</html>

ตัวอย่างการเปลี่ยนแปลงเพิ่มเติม

คุณสมบัติการเปลี่ยน CSS สามารถระบุได้ทีละรายการ เช่นนี้

ตัวอย่าง

div
{
  transition-property: width;
   
transition-duration: 2s;
   
transition-timing-function: linear;
  transition-delay: 1s;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition Properties Specified One by One</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

</body>
</html>

หรือโดยใช้คุณสมบัติชวเลข transition:

ตัวอย่าง

div
{
   
transition: width 2s linear 1s;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s linear 1s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>Using The transition Shorthand Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

</body>
</html>

คุณสมบัติการเปลี่ยน CSS

ตารางต่อไปนี้แสดงรายการคุณสมบัติการเปลี่ยน CSS ทั้งหมด:

transition: คุณสมบัติชวเลขสำหรับการตั้งค่าคุณสมบัติการเปลี่ยนแปลงทั้งสี่ให้เป็นคุณสมบัติเดียว
transition-delay: ระบุความล่าช้า (เป็นวินาที) สำหรับเอฟเฟกต์การเปลี่ยนแปลง
transition-duration: ระบุจำนวนวินาทีหรือมิลลิวินาทีที่เอฟเฟ็กต์การเปลี่ยนแปลงจะใช้เวลาดำเนินการให้เสร็จสิ้น
transition-property: ระบุชื่อของคุณสมบัติ CSS ที่เป็นเอฟเฟกต์การเปลี่ยนแปลง
transition-timing-function: ระบุเส้นโค้งความเร็วของเอฟเฟกต์การเปลี่ยนแปลง