ตัวอย่างการสร้างแอนิเมชันเปลี่ยนค่า max-width (ความกว้างสูงสุด) ของ element
ตัวอย่างโค้ด
<!DOCTYPE html>
<html>
<head>
<style>
div {
overflow: auto;
background-color: blue;
color: white;
border: 1px solid black;
animation: myanim 3s;
}
@keyframes myanim {
30% {
max-width: 250px;
}
}
</style>
</head>
<body>
<h1>Example of max-width</h1>
<div>
<p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.</p>
</div>
</body>
</html>
คำอธิบาย: กล่องเริ่มต้นไม่มี max-width (หรือค่าเริ่มต้น none) ขยายเต็ม container ที่ 30% max-width จะจำกัดที่ 250px ทำให้กล่องหดเล็กลง และเนื้อหา wrap หรือมี scrollbar
ความแตกต่าง min-width vs max-width:
min-width: element จะไม่เล็กลงกว่านี้ (ขยายได้)max-width: element จะไม่กว้างขึ้นกว่านี้ (หดได้)
ประสิทธิภาพ: การ animate max-width ก่อให้เกิด reflow
