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

CSS के साथ एनीमेशन गुणों को दोनों दिशाओं में बढ़ाएँ

<घंटा/>

एनिमेशन-फ़िल-मोड का उपयोग करें दोनों . के मान वाली संपत्ति एनिमेशन गुणों को दोनों दिशाओं में विस्तारित करने के लिए।

उदाहरण

<!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. सीएसएस के साथ सभी एनीमेशन गुणों को सेट करने के लिए शॉर्टहैंड संपत्ति

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

  1. CSS के साथ एनीमेशन की गति वक्र निर्दिष्ट करें

    एनिमेशन-टाइमिंग-फ़ंक्शन का उपयोग करें एनिमेशन की गति वक्र सेट करने के लिए। इसे प्राप्त करने के लिए आप निम्न कोड चलाने का प्रयास कर सकते हैं उदाहरण <!DOCTYPE html> <html>    <head>       <style>          div {     &nb

  1. CSS के साथ बैकग्राउंड-कलर प्रॉपर्टी पर एनिमेशन करें

    CSS के साथ बैकग्राउंड-कलर प्रॉपर्टी पर एनिमेशन लागू करने के लिए, आप निम्न कोड को चलाने का प्रयास कर सकते हैं उदाहरण <!DOCTYPE html> <html>    <head>       <style>          div {             width: