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

CSS3 के साथ लेफ्ट एनिमेशन का कीफ्रेम्स उदाहरण

निम्नलिखित उदाहरण कीफ्रेम्स सिंटैक्स के साथ ऊंचाई, चौड़ाई, रंग, नाम और एनिमेशन अवधि दिखाता है:

उदाहरण

<html>    <head>       <style type = "text/css">          h1 {             -moz-animation-duration: 3s;             -webkit-animation-duration: 3s;             -moz-animation-name: slidein;             -webkit-animation-name: slidein;          }          @-moz-keyframes slidein {             from {                margin-left:100%; width:300%             }             to {                margin-left:0%; width:100%;             }          }          @-webkit-keyframes slidein {             from {                margin-left:100%; width:300%             }             to {                margin-left:0%; width:100%;             }           }       </style>    </head>    <body>       <h1>Tutorials Point</h1>       <p>यह लेफ्ट मूविंग एनिमेशन का उदाहरण है।</p>       <button onclick = "myFunction()">पेज रीलोड करें</button>       <script> function myFunction() { location.reload(); } </script>    </body> </html>

  1. - CSS animation-timing-function से एनिमेशन का धीमा अंत सेट करें

    CSS में animation-timing-function प्रॉपर्टी का ease-out मान एनिमेशन को धीमी गति से समाप्त करता है। एनिमेशन तेजी से शुरू होता है और अंत में धीमा हो जाता है। उदाहरण नीचे दिए गए उदाहरण में, एक <div> तत्व पर एनिमेशन लागू किया गया है जो ease-out टाइमिंग फंक्शन का उपयोग करता है। <!DOCTYPE html&

  1. - CSS animation-timing-function से एनिमेशन का धीमा शुरुआत सेट करें

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

  1. CSS3 box-sizing से लेआउट बनाएं CSS3 box-sizing से लेआउट बनाएं

    box-sizing प्रॉपर्टी तय करती है कि width/height में पैडिंग/बॉर्डर शामिल हैं या नहीं। border-box (पैडिंग/बॉर्डर शामिल), content-box (डिफ़ॉल्ट, केवल कंटेंट)। border-box लेआउट आसान बनाता है। उदाहरण <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahom