CSS flex प्रॉपर्टी (जो flex-grow, flex-shrink, और flex-basis का शॉर्टहैंड है) को एनिमेट करने के लिए @keyframes का उपयोग करें। नीचे दिया गया उदाहरण फ्लेक्स आइटम्स के आकार को एनिमेट करता है।
उदाहरण
<!DOCTYPE html> <html> <head> <style> .box { display: flex; background-color: orange; align-content: space-between; height: 150px; width: 600px; flex-wrap: wrap; } .box > div { background-color: white; text-align: center; line-height: 40px; font-size: 25px; width: 100px; margin: 5px; } div { animation: myanim 4s infinite; } @keyframes myanim { 50% { flex: 1; } } </style> </head> </body> </html>
व्याख्या: .box एक फ्लेक्स कंटेनर है जिसमें कई चाइल्ड डिव्स हैं। प्रत्येक चाइल्ड डिव पर animation: myanim 4s infinite लागू है। 50% कीफ्रेम पर flex: 1 सेट किया जाता है, जिससे सभी आइटम्स समान रूप से बढ़कर उपलब्ध स्थान भर लेते हैं।
