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

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

<घंटा/>

एनिमेशन-टाइमिंग-फ़ंक्शन का उपयोग करें संपत्ति, सीएसएस के साथ धीमी गति से एनीमेशन सेट करने के लिए आसान मूल्य के साथ

उदाहरण

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

  1. CSS का उपयोग करके सेट करें कि एनीमेशन चल रहा है या रोका गया है

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

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

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

  1. CSS के साथ शुरू से अंत तक समान गति के साथ एक एनीमेशन सेट करें

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