การทำ Animation บนคุณสมบัติ CSS background-size

หากต้องการนำ animation ไปใช้กับคุณสมบัติ background-size ใน CSS สามารถทดลองรันโค้ดตัวอย่างด้านล่างได้

ตัวอย่างโค้ด

<!DOCTYPE html> <html>    <head>       <style>          div {             width: 500px;             height: 400px;             background: yellow;             background-image: url('https://www.tutorialspoint.com/latest/microservice_architecture.png');             animation: myanim 3s infinite;             background-position: bottom left;             background-size: 50px;          }          @keyframes myanim {             20% {                background-color: maroon;                background-position: bottom right;                background-size: 90px;             }         }       </style>    </head>    <body>       <div></div>    </body> </html>

คำอธิบาย

ตัวอย่างนี้ทำ animation บน background-size จาก 50px เป็น 90px ที่ 20% ของระยะเวลา พร้อมกับเปลี่ยน background-position จาก bottom left เป็น bottom right และ background-color เป็น maroon

ค่าของ background-size ที่นิยมทำ animation:

• <length> - ขนาดคงที่ (px, em, rem)
• <percentage> - เปอร์เซ็นต์ของพื้นที่ element
• cover - ครอบคลุมทั้งพื้นที่ (อาจตัดขอบ)
• contain - ใส่ทั้งภาพในพื้นที่ (อาจมีช่องว่าง)

หมายเหตุ: การ animate ระหว่าง keyword (cover/contain) และค่าตัวเลขอาจไม่ราบรื่นในบางเบราว์เซอร์ ควร animate ระหว่างค่าตัวเลขเท่านั้น