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

CSS animation-timing-function प्रॉपर्टी


animation-timing-function प्रॉपर्टी लागू करने के लिए निम्न कोड चलाकर देखें:

उदाहरण

<!DOCTYPE html> <html>    <head>       <style>          div {             width: 150px;             height: 200px;             position: relative;             background-color: yellow;             animation-name: myanim;             animation-duration: 2s;             animation-direction: alternate-reverse;             animation-iteration-count: 3;          }          @keyframes myanim {             from {left: 100px;}             to {left: 200px;}          }          #demo1 {animation-timing-function: ease;}          #demo2 {animation-timing-function: ease-in;}       </style>    </head>    <body>       <div id = "demo1">ease effect</div>       <div id = "demo2">ease-in effect</div>    </body> </html>

  1. - CSS flex-basis प्रॉपर्टी को एनिमेट करें

    CSS flex-basis प्रॉपर्टी (फ्लेक्स आइटम की प्रारंभिक मुख्य आकार) को एनिमेट करने के लिए @keyframes का उपयोग करें। उदाहरण <!DOCTYPE html> <html> <head> <style>    .box {       display: flex;       background-color: green;    } &

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

    फ्लेक्स-श्रिंक एनिमेशन flex-shrink प्रॉपर्टी पर CSS एनिमेशन लागू करें: उदाहरण <!DOCTYPE html> <html> <head> <style> .mycontainer { display: flex; background-color: orange; } .mycontainer > div { background-color: white; text-align: center;

  1. CSS isolation प्रॉपर्टी CSS isolation प्रॉपर्टी

    isolation प्रॉपर्टी का उपयोग यह परिभाषित करने के लिए किया जाता है कि कोई तत्व एक नया स्टैकिंग संदर्भ बनाएगा या नहीं। सिंटैक्स isolation: auto | isolate | initial | inherit; उदाहरण <!DOCTYPE html> <html> <head> <style> .demo1 { background-color: orange; }