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

CSS3 का उपयोग करके कीफ़्रेम के साथ बाएँ एनिमेशन को स्थानांतरित करना


आप 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%
            }
            75% {
               font-size:300%;
               margin-left:25%;
               width:150%;
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
         @-webkit-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            75% {
               font-size:300%;
               margin-left:25%;
               width:150%;
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
      </style>
   </head>
   <body>
      <h1>Tutorials Point</h1>
      <p>This is an example of animation left with an extra keyframe to make text changes.</p>
      <button onclick = "myFunction()">Reload page</button>
      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>

  1. CSS का उपयोग करके धीमी शुरुआत के साथ एनिमेशन सेट करें

    एनीमेशन-टाइमिंग-फ़ंक्शन प्रॉपर्टी का उपयोग करें, सीएसएस के साथ धीमी शुरुआत के साथ एनीमेशन सेट करने के लिए आसानी से मूल्य के साथ उदाहरण <!DOCTYPE html> <html>    <head>       <style>          div {         &

  1. CSS3 का उपयोग करके बॉक्स-साइज़िंग के साथ लेआउट बनाना

    CSS3 का उपयोग करके बॉक्स-साइज़िंग लेआउट बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <style> body{    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .container{    width: 500px;    border:8px soli

  1. CSS3 में कीफ्रेम को परिभाषित करना

    CSS3 में कीफ़्रेम एनिमेशन बनाने के लिए, अलग-अलग कीफ़्रेम को परिभाषित करें। कीफ़्रेम CSS3 में मध्यवर्ती एनिमेशन चरणों को नियंत्रित करेंगे। CSS3 में मुख्य फ़्रेम को परिभाषित करने के लिए कोड निम्नलिखित है - उदाहरण <!DOCTYPE html> <html> <head> <style> body {    font-f