Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> CSS

CSS border-color प्रॉपर्टी को एनिमेट करें

CSS border-color प्रॉपर्टी (सभी चारों बॉर्डर का रंग) को एनिमेट करने के लिए @keyframes का उपयोग करें।

उदाहरण

<!DOCTYPE html> <html>    <head>       <style>          div {             width: 500px;             height: 300px;             background: yellow;             border: 10px solid gray;             animation: myanim 3s infinite;             background-position: bottom left;             background-size: 50px;          }          @keyframes myanim {             20% {                border-color: red;             }          }       </style>    </head>    <body>       <h2>Performing Animation for color of border</h2>       <div></div>    </body> </html>

व्याख्या: प्रारंभ में बॉर्डर ग्रे है। 20% कीफ्रेम पर सभी बॉर्डर लाल हो जाते हैं, फिर वापस ग्रे।

  1. - CSS top प्रॉपर्टी को एनिमेशन के साथ

    CSS में top प्रॉपर्टी पर एनिमेशन लागू करने का तरीका यहां दिखाया गया है। यह स्थिति निर्धारित तत्वों की ऊपरी किनारे से दूरी को बदलता है। उदाहरण <!DOCTYPE html> <html> <head> <style> div { position: absolute; width: 300px; height: 200px;

  1. - CSS एनिमेशन के साथ transform प्रॉपर्टी को एनिमेट करें

    CSS में transform प्रॉपर्टी पर एनिमेशन लागू करने का तरीका यहां दिखाया गया है। यह 2D/3D ट्रांसफॉर्मेशन (घुमाव, स्केलिंग, स्थानांतरण, तिरछा) को एनिमेट करता है। उदाहरण <!DOCTYPE html> <html> <head> <style> div { margin: auto; border: 2px solid bl

  1. - CSS एनिमेशन के साथ vertical-align प्रॉपर्टी को एनिमेट करें

    CSS में vertical-align प्रॉपर्टी पर एनिमेशन लागू करने का तरीका यहां दिखाया गया है। यह इंलाइन या टेबल-सेल तत्वों के ऊर्ध्वाधर संरेखण को बदलता है। उदाहरण <!DOCTYPE html> <html> <head> <style> img { vertical-align: 80px; animation: myanim 3s;