หากต้องการนำ animation ไปใช้กับคุณสมบัติ border-bottom-right-radius ใน CSS สามารถทดลองรันโค้ดตัวอย่างด้านล่างได้
ตัวอย่างโค้ด
<!DOCTYPE html> <html> <head> <style> div { width: 500px; height: 400px; background: yellow; border: 10px solid yellow; border-bottom-right-radius: 150px; background-image:url('https://www.tutorialspoint.com/latest/electronic_measuring_instruments.png'); animation: myanim 3s infinite; background-position: bottom left; background-size: 50px; } @keyframes myanim { 20% { background-color: maroon; background-size: 90px; border-bottom-color: green; border-bottom-right-radius: 50px; } } </style> </head> <body> <h2>Performing Animation bottom border right radius</h2> <div></div> </body> </html>
คำอธิบาย
ตัวอย่างนี้แสดงการทำ animation หลายคุณสมบัติพร้อมกันที่ 20% ของระยะเวลา:
- เปลี่ยน
border-bottom-right-radiusจาก 150px เป็น 50px - เปลี่ยน
background-colorเป็น maroon - เปลี่ยน
background-sizeจาก 50px เป็น 90px - เปลี่ยน
border-bottom-colorเป็นสีเขียว
การทำ animation บน border-radius ได้รับการรองรับดีในเบราว์เซอร์สมัยใหม่และสามารถสร้างเอฟเฟกต์การเปลี่ยนรูปร่างที่น่าสนใจได้
