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

CSS से एनिमेशन प्रॉपर्टीज़ को दोनों दिशाओं में बढ़ाएं


एनिमेशन प्रॉपर्टीज़ को दोनों दिशाओं में बढ़ाने के लिए animation-fill-mode प्रॉपर्टी का उपयोग both वैल्यू के साथ करें।

उदाहरण

<!DOCTYPE html> <html>    <head>       <style>          div {             width: 150px;             height: 200px;             position: relative;             background: red;             animation-name: myanim;             animation-duration: 2s;             animation-fill-mode: both;          }          @keyframes myanim {             from {left: 0px; background-color: green;}             to {left: 200px; background-color: blue;}          }       </style>    </head>    <body>       <div></div>    </body> </html>

  1. - CSS से सभी एनिमेशन प्रॉपर्टीज़ सेट करने की शॉर्टहैंड प्रॉपर्टी

    सभी एनिमेशन प्रॉपर्टीज़ सेट करने की शॉर्टहैंड प्रॉपर्टी animation है। यह एनिमेशन अवधि, एनिमेशन नाम आदि सेट करती है। एनिमेशन शॉर्टहैंड प्रॉपर्टी के साथ काम करने के लिए निम्न कोड चलाकर देखें: उदाहरण <!DOCTYPE html> <html>    <head>       <style>  

  1. - CSS animation-timing-function से एनिमेशन की गति वक्र निर्दिष्ट करें

    CSS animation-timing-function प्रॉपर्टी एनिमेशन की गति वक्र (speed curve) को परिभाषित करती है, यानी एनिमेशन कैसे प्रगति करेगा - धीमी शुरुआत, तेज मध्य, धीमा अंत, या एक समान गति। उदाहरण नीचे दिए गए उदाहरण में, दो <div> तत्वों पर अलग-अलग टाइमिंग फंक्शन (ease और ease-in) लागू किए गए हैं। <!DO

  1. - CSS background-color प्रॉपर्टी पर एनिमेशन करें

    CSS background-color प्रॉपर्टी को एनिमेट करने के लिए @keyframes का उपयोग करें। यह सरल रंग परिवर्तन एनिमेशन बनाता है। उदाहरण <!DOCTYPE html> <html>    <head>       <style>          div {           &nbs