CSS में columns प्रॉपर्टी पर एनिमेशन लागू करने के लिए, आप निम्न कोड आज़मा सकते हैं। यह उदाहरण दिखाता है कि कैसे कॉलम काउंट, कॉलम नियम रंग, और अन्य प्रॉपर्टीज़ को एनिमेट किया जा सकता है।
उदाहरण
<!DOCTYPE html> <html>
<head>
<style>
div {
width: 600px;
height: 300px;
background: white;
border: 10px solid red;
animation: myanim 3s infinite;
bottom: 30px;
position: absolute;
column-rule: 10px inset orange;
column-count: 4;
}
@keyframes myanim {
20% {
bottom: 100px;
box-shadow: 30px 45px 70px orange;
column-rule-color: black;
columns: 70px 6;
}
}
</style>
</head>
<body>
<h2>कॉलम नियम रंग प्रॉपर्टी पर एनिमेशन करना</h2>
<div>यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है! यह डेमो टेक्स्ट है!</div>
</body>
</html>
नोट: columns शॉर्टहैंड प्रॉपर्टी column-width और column-count दोनों को सेट करती है। एनिमेशन के दौरान कॉलम संख्या 4 से 6 हो जाती है और कॉलम चौड़ाई 70px सेट होती है।
