CSS में border-bottom-left-radius प्रॉपर्टी पर एनिमेशन लागू करने के लिए आप @keyframes नियम का उपयोग कर सकते हैं। नीचे दिया गया उदाहरण दर्शाता है कि कैसे एक div तत्व के निचले-बाएं कोने की त्रिज्या को समय के साथ बदला जा सकता है।
उदाहरण
<!DOCTYPE html> <html> <head> <style> div { width: 500px; height: 400px; background: yellow; border: 10px solid green; border-bottom-left-radius: 150px; animation: myanim 3s infinite; background-position: bottom left; background-size: 50px; } @keyframes myanim { 20% { background-size: 90px; border-bottom-left-radius: 50px; } } </style> </head> <body> <h2>Performing Animation for bottom border left radius</h2> <div></div> </body> </html>
व्याख्या: इस उदाहरण में, एक पीले रंग का div बनाया गया है जिसकी हरी बॉर्डर है। border-bottom-left-radius को प्रारंभ में 150px सेट किया गया है। @keyframes myanim एनिमेशन 3 सेकंड में अनंत बार चलता है। 20% पर, background-size 90px हो जाता है और border-bottom-left-radius 50px तक घट जाता है, जिससे कोना कम गोलाकार दिखाई देता है।
