वेब पर आपकी एनिमेशन की अपील जोड़ना

जब हम एनीमेशन का उपयोग करने के बारे में बात करते हैं, तो अक्सर हम व्यावहारिक तरीके से चर्चा करते हैं जिससे हम संक्रमण, एनिमेशन, और इतने पर बना सकते हैं। एनीमेशन हमारे डिजाइनों को बाहर करने के लिए एक शक्तिशाली तरीका है, लेकिन व्यक्तिगत एनीमेशन कैसे काम करता है पर ध्यान देने की बजाय, जिस तरह से कई एनीमेशन गठबंधन करता है वह और भी अधिक शक्तिशाली बना सकता है।

अपील

एनीमेशन के डिज़नी के 12 मूलभूत सिद्धांत "अपील" को "एक अभिनेता में करिश्मा" के समान के रूप में परिभाषित करता है। कैसे होता है कि यथार्थवाद, स्टाइल और एनीमेशन का पदार्थ, चरित्र की भावना पैदा करने के लिए कहते हैं, जो कि दर्शकों को वास्तविक और दिलचस्प लगता है।

यह Stripe द्वारा महान इफ़ेक्ट के लिए इस्तेमाल की जाने वाली तकनीक है। स्ट्राइप एक भुगतान प्रोसेसर है, और साइट्स में भुगतान फ़ॉर्म को एम्बेड करने के लिए उपकरण प्रदान करता है। ये फॉर्म्स खूबसूरती से डिजाइन किए जाने के लिए प्रसिद्ध हैं, विशेष रूप से एनीमेशन का उनका उपयोग।

इस आलेख में मैं चर्चा करूंगा कि कितने एनिमेशन का इस्तेमाल उसके भागों के योग से अधिक प्रभाव बनाने के लिए किया जा सकता है, और यह दिखाएं कि आप इस ज्ञान को एक व्यावहारिक तरीके से कैसे उपयोग कर सकते हैं।

सोशल मीडिया कार्ड

इस उदाहरण में हम एनीमेशन का उपयोग विवरण के साथ कार्ड और वेब के लिंक और अन्य सामाजिक खातों को प्रस्तुत करने के लिए करेंगे।

जब एक बटन दबाया जाता है, तो यह कुछ का follow करने वाले विकल्पों के साथ दिखाई देने के लिए एक कार्ड को संकेत देगा। सादे पुराने मॉडल विंडो का उपयोग करने के बजाय, हम एनीमेशन का उपयोग इसे और अधिक दिलचस्प बनाने के लिए करेंगे।

इसे अपील करने के लिए, कई एनिमेशन हो रहे हैं। विभिन्न टुकड़ों में चेतन और क्रम में प्रत्येक तत्व परिचय। यह दर्शकों को उनके द्वारा जो दबाया गया है और सामग्री और एनीमेशन के क्रम के बीच के संबंध को समझने में मदद करता है, आंखों को अनुवर्ती चिह्नों में खींचने में मदद करता है।

HTML सेट करना

शुरू करने के लिए हमें प्रेस करने के लिए एक बटन और एक कार्ड दिखाने की आवश्यकता है। कार्ड पहली बार दिखाए जाने पर कार्ड छुपाएगा।

  <button class="show-card">
    <img src="https://avatars2.githubusercontent.com/u/853536?v=3&amp;s=48">
    Press here
  </button>
  <article class="card">
    <section class="close">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 32 32">
        <path d="M31.708 25.708c-0-0-0-0-0-0l-9.708-9.708 9.708-9.708c0-0 0-0 0-0 0.105-0.105 0.18-0.227 0.229-0.357 0.133-0.356 0.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.13 0.048-0.252 0.124-0.357 0.228 0 0-0 0-0 0l-9.708 9.708-9.708-9.708c-0-0-0-0-0-0-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 0.229l-4.586 4.586c-0.286 0.286-0.361 0.702-0.229 1.057 0.049 0.13 0.124 0.252 0.229 0.357 0 0 0 0 0 0l9.708 9.708-9.708 9.708c-0 0-0 0-0 0-0.104 0.105-0.18 0.227-0.229 0.357-0.133 0.355-0.057 0.771 0.229 1.057l4.586 4.586c0.286 0.286 0.702 0.361 1.057 0.229 0.13-0.049 0.252-0.124 0.357-0.229 0-0 0-0 0-0l9.708-9.708 9.708 9.708c0 0 0 0 0 0 0.105 0.105 0.227 0.18 0.357 0.229 0.356 0.133 0.771 0.057 1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 0.229-1.057-0.049-0.13-0.124-0.252-0.229-0.357z" fill="#aaa"></path>
      </svg>
    </section>
    <section class="details">
      <h2 class="name">Donovan Hutchinson</h2>
      <p class="description">Donovan is a Dublin-based front-end developer with a passion for CSS, animation and making the web fun.</p>
    </section>
    <section class="headshot">
      <img src="https://avatars2.githubusercontent.com/u/853536?v=3&amp;s=280">
    </section>
    <section class="icon-bar">
      <ul>
        <li>
          <a href="http://cssanimation.rocks">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
              <path d="M32 19l-6-6v-9h-4v5l-6-6-16 16v1h4v10h10v-6h4v6h10v-10h4z" fill="#fff"></path>
            </svg>
          </a>
        </li>
        <li>
          <a href="https://twitter.com/cssanimation">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
              <path d="M32 6.076c-1.177 0.522-2.443 0.875-3.771 1.034 1.355-0.813 2.396-2.099 2.887-3.632-1.269 0.752-2.674 1.299-4.169 1.593-1.198-1.276-2.904-2.073-4.792-2.073-3.626 0-6.565 2.939-6.565 6.565 0 0.515 0.058 1.016 0.17 1.496-5.456-0.274-10.294-2.888-13.532-6.86-0.565 0.97-0.889 2.097-0.889 3.301 0 2.278 1.159 4.287 2.921 5.465-1.076-0.034-2.088-0.329-2.974-0.821-0.001 0.027-0.001 0.055-0.001 0.083 0 3.181 2.263 5.834 5.266 6.437-0.551 0.15-1.131 0.23-1.73 0.23-0.423 0-0.834-0.041-1.235-0.118 0.835 2.608 3.26 4.506 6.133 4.559-2.247 1.761-5.078 2.81-8.154 2.81-0.53 0-1.052-0.031-1.566-0.092 2.905 1.863 6.356 2.95 10.064 2.95 12.076 0 18.679-10.004 18.679-18.68 0-0.285-0.006-0.568-0.019-0.849 1.283-0.926 2.396-2.082 3.276-3.398z" fill="#fff"></path>
            </svg>
          </a>
        </li>
        <li>
          <a href="https://github.com/cssanimation">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
              <path d="M0 17.388c0 1.45 0.136 2.762 0.407 3.935s0.647 2.193 1.127 3.059 1.090 1.627 1.831 2.285c0.741 0.657 1.544 1.195 2.41 1.612s1.854 0.756 2.965 1.017c1.111 0.261 2.245 0.443 3.403 0.548s2.431 0.156 3.818 0.156c1.398 0 2.676-0.052 3.834-0.156s2.295-0.287 3.411-0.548 2.11-0.6 2.981-1.017c0.871-0.417 1.68-0.954 2.425-1.612s1.361-1.419 1.846-2.285 0.863-1.886 1.134-3.059c0.271-1.174 0.407-2.486 0.407-3.935 0-2.587-0.866-4.825-2.597-6.713 0.094-0.25 0.18-0.535 0.258-0.853s0.151-0.772 0.219-1.361c0.068-0.589 0.042-1.27-0.078-2.042s-0.342-1.56-0.665-2.363l-0.235-0.047c-0.167-0.031-0.441-0.023-0.822 0.024s-0.824 0.141-1.33 0.282c-0.506 0.141-1.158 0.412-1.956 0.814s-1.64 0.905-2.527 1.51c-1.523-0.417-3.615-0.626-6.275-0.626-2.65 0-4.736 0.209-6.259 0.626-0.887-0.605-1.734-1.108-2.543-1.51s-1.453-0.673-1.933-0.814c-0.48-0.141-0.928-0.232-1.346-0.274s-0.681-0.055-0.79-0.039-0.196 0.034-0.258 0.055c-0.323 0.803-0.545 1.591-0.665 2.363s-0.146 1.453-0.078 2.042 0.141 1.043 0.219 1.361c0.078 0.318 0.164 0.602 0.258 0.853-1.732 1.888-2.598 4.126-2.598 6.713zM3.928 21.315c0-1.502 0.683-2.879 2.050-4.131 0.407-0.376 0.881-0.66 1.424-0.853s1.155-0.302 1.839-0.329c0.683-0.026 1.338-0.021 1.964 0.016s1.398 0.086 2.316 0.149c0.918 0.063 1.711 0.094 2.379 0.094s1.46-0.031 2.378-0.094c0.918-0.063 1.69-0.112 2.316-0.149s1.28-0.042 1.964-0.016c0.683 0.026 1.296 0.136 1.839 0.329s1.017 0.477 1.424 0.853c1.367 1.231 2.050 2.608 2.050 4.131 0 0.897-0.112 1.693-0.337 2.386s-0.511 1.275-0.861 1.745-0.834 0.868-1.455 1.197c-0.621 0.329-1.226 0.582-1.815 0.759s-1.346 0.316-2.269 0.415c-0.923 0.099-1.747 0.159-2.472 0.18s-1.646 0.031-2.762 0.031-2.037-0.010-2.762-0.031c-0.725-0.021-1.549-0.081-2.472-0.18s-1.68-0.237-2.269-0.415c-0.589-0.177-1.194-0.43-1.815-0.759s-1.106-0.728-1.455-1.197c-0.349-0.469-0.636-1.051-0.861-1.745s-0.336-1.489-0.336-2.386zM20 21c0-1.657 0.895-3 2-3s2 1.343 2 3c0 1.657-0.895 3-2 3s-2-1.343-2-3zM8 21c0-1.657 0.895-3 2-3s2 1.343 2 3c0 1.657-0.895 3-2 3s-2-1.343-2-3z" fill="#fff"></path>
            </svg>
          </a>
        </li>
    </section>
  </article>

बटन एक इमेज और कुछ टेक्स्ट है। दबाए जाने पर, यह कार्ड दिखाएगा। कार्ड चार वर्गों से बना है; एक क्लोज बटन, एक विवरण खंड, हेडशॉट और एक आइकॉन बार जिसमें सामाजिक आइकन हैं। इस उदाहरण के लिए हम एन्टीपो संग्रह से ली गई इनलाइन SVG आइकनों का उपयोग कर रहे हैं।

स्टाइलिंग

एनिमेशन में आने से पहले बटन और कार्ड में कुछ स्टाइल जोड़ें। सबसे पहले, बटन:

.show-card {
  background: #fff;
  border-radius: 4em;
  border: 0.25em solid #1fa756;
  color: #1fa756;
  font-size: 18px;
  left: 50%;
  line-height: 1.5;
  padding: 1em 1em 1em 4em;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  outline: none;
}

.show-card img {
  border-radius: 50%;
  left: 0.3em;
  position: absolute;
  top: 0.25em;
  width: 3em;
}

नोट: हमने एक जोड़ा है: outline: none; .show-card तत्व के लिए क्योंकि कुछ ब्राउज़र्स बटनों की फोकस स्थिति (जो हम नहीं चाहते हैं) के लिए एक अजीब चमक जोड़ते हैं:

तब हम इसमें कार्ड और प्रत्येक अनुभाग को स्टाइल करेंगे।

.card {
  bottom: calc(50% - 8em);
  display: none;
  height: 16em;
  left: calc(50% - 10em);
  position: absolute;
  transition: all 0.4s 0.4s cubic-bezier(.5,.2,.43,1.33);
  width: 20em;
}

.close {
  color: #aaa;
  cursor: pointer;
  height: 1em;
  opacity: 0;
  position: absolute;
  right: 0.5em;
  top: 0.5em;
  width: 1em;
  z-index: 10;
}

.details {
  position: absolute;
  bottom: 2.5em;
  background: #fff;
  border-radius: 0.25em;
  height: 0;
  overflow: hidden;
  text-align: center;
  width: 20em;
}

.name {
  color: #333;
  font-weight: bold;
  margin: 3em 0 0;
  opacity: 0;
}

.description {
  color: #666;
  font-size: 1em;
  font-weight: 200;
  line-height: 1.5;
  margin: 0.75em 2em 2em;
  opacity: 0;
}

.headshot img {
  border-radius: 50%;
  border: 0.5em solid #fff;
  display: block;
  height: 6em;
  margin: -3em auto 0.5em;
  opacity: 0;
  width: 6em;
}

.icon-bar {
  background: #1fa756;
  border-radius: 0.25em;
  left: -1em;
  position: absolute;
  right: -1em;
  top: 13em;
}

.icon-bar ul {
  display: flex;
  flex-display: column;
  flex-wrap: nowrap;
  padding: 0;
}

.icon-bar li {
  display: inline-block;
  font-size: 2em;
  opacity: 0;
  padding: 0 1em;
  width: 33%;
}

.icon-bar a {
  color: #fff;
  text-decoration: none;
}

ध्यान दें कि हम इस कार्ड को display: none करने के लिए सेट कर सकते हैं। हम इस पर JavaScript का प्रयोग करेंगे।

बेसिक शो और छुपाएं

CSS में घुसने की बजाए, हम पहले संपर्क जानकारी दिखाने और छिपाने की बुनियादी कार्रवाई को स्थापित करेंगे। यह क्लिक किए जाने के आधार पर क्लासेज को जोड़ने और हटाने के लिए थोड़ा JavaScript (और इस मामले में jQuery) का उपयोग करेगा:

// Show the card on clicking the button
$('.show-card').click(function(e) {
  $('.card').addClass('show').css('display', 'block');
  $('.show-card').addClass('hide');
});

// Hide the card on clicking the "x"
$('.card .close').click(function(e) {
  $('.card').css('display', 'none');
});

हमें अब jQuery और display CSS प्रॉपर्टी का उपयोग करके कार्ड को दिखाने और छिपाने में सक्षम होना चाहिए।

बुनियादी शो देखें और उदाहरण यहां छुपाएं:

एनिमेटिंग से पहले

जगह लेआउट के साथ हमें विभिन्न तत्वों को छिपाने के लिए कुछ अतिरिक्त स्टाइल्स को जोड़ने की जरूरत है ताकि हम उन्हें व्यू में बदल सकें।

.close, .name, .description, .headshot img, .icon-bar li {
  opacity: 0;
}
.details {
  height: 0;
}

इन तत्वों के एनीमेशन के प्रभावी होने से पहले एक विलंब होगा, इसलिए शुरू में दृष्टि से बाहर होना चाहिए।

मूल एनिमेशन

कार्ड दिखाने और छिपाने के लिए जगह में तंत्र के साथ, हम एनिमेशन को संलग्न करना शुरू कर सकते हैं। JavaScript show में कार्ड में शो स्थिति दिखाता है, और हम इस वर्ग में एनिमेशन को जोड़ सकते हैं जो कार्ड के अलग-अलग हिस्सों को पेश करेंगे।

ऐसा करने के लिए हम CSS animation प्रॉपर्टी और keyframes के सेट का उपयोग करेंगे I

CSS में सामान्य प्रयोजन एनिमेशन बनाने और उन्हें पुन: उपयोग करने में मददगार हैं। सरल एनिमेशन जैसे कि लुप्त होती और बाहर एक बार परिभाषित किया जा सकता है और कई जगहों में उपयोग किया जा सकता है।

keyframes कैसे परिभाषित किए जाने हैं, यह दिखाने के लिए, हम फ़ेड इन बनाते हैं और एनिमेशन को फीका करते हैं।

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

कीफ्रेम प्रतिशत की एक श्रृंखला है, जो प्रतिशत के रूप में परिभाषित है। वे किसी भी संख्या में हो सकते हैं, लेकिन हमारे उदाहरण में हम केवल शुरुआत (0%) और अंत (100%) कीफ्रेम को परिभाषित करते हैं। fade-in में हम बिना ओपेसिटी (0) और पूर्ण ओपेसिटी (1) में समाप्त होते हैं। fade-out एनीमेशन विपरीत होता है।

हम इन फीड animation के बटन को तब दिखाए जाने के लिए एनीमेशन संपत्ति का उपयोग कर सकते हैं जब दिखाया जाता है और छिपाया जाता है।

.show-card {
  animation: fade-in 0.4s 1s forwards ease-out;
}
.show-card.hide {
  animation: fade-out 0.4s forwards ease-out;
}

एनीमेशन शॉर्टहैंड यहां कार्ड को fade-in ऐनिमेशन का उपयोग करने के लिए कहता है, 1 सेकंड की देरी के साथ 0.4 सेकंड तक चले। एनीमेशन एक बार खेलेंगे और अंत में (आगे) बंद हो जाएगी और ease-out करने के समय का उपयोग करेंगी।

जब hide क्लास को बटन पर लागू किया जाता है, तो fade-out एनीमेशन इफ़ेक्ट होता है।

उछालभरी इफ़ेक्ट का समय फ़ंक्शन

पहला भाग जिसे हम शुरू करेंगे Icon बार है। चूंकि यह वह जगह है जहां लिंक होंगे, हम इसे बाहर खड़े करना चाहते हैं और पहली बात लोगों को नोटिस करना चाहिए।

एनिमेट करते समय हम टाइमिंग फ़ंक्शन संपत्ति का उपयोग करके दिलचस्प इफ़ेक्ट बना सकते हैं। इस स्थिति में हम आइकन बार प्रकट होने पर कुछ "बाउंस" जोड़ने के लिए एक cubic-bezier टाइमिंग फ़ंक्शन का उपयोग करेंगे।

पहले हम कुछ सरल केफरमेस बनाएंगे, जिसमें बार शुरू होता है और ऊंचाई में बढ़ोतरी होती है।

@keyframes show-icon-bar {
  0% {
    height: 0;
  }
  100% {
    height: 4.5em;
  }
}

अब हम इस सेट के कीफ्रेमों को आइकन बार पर लागू कर सकते हैं, जब show class को कार्ड में जोड़ा जाता है।

.card.show .icon-bar {
  animation: show-icon-bar .5s forwards cubic-bezier(.64,1.87,.64,.64);
}

उछालभरी असर cubic-bezier टाइमिंग फ़ंक्शन के उपयोग द्वारा बनाई गई है। समय फ़ंक्शन एनीमेशन के माध्यम से गति में परिवर्तन का वर्णन करता है, और एनीमेशन के शुरुआती या अंत को खत्म करने के लिए डिज़ाइन किया जा सकता है। यह एनीमेशन थोड़ा अधिक हो जाता है, फिर सुधार करता है, उछाल बना सकता है।

एनीमेशन विलंब

आइकन बार की शुरुआत के साथ, हमें उस अनुभाग को चेतन करना होगा जिसमें विवरण और हेडशॉट शामिल हैं। हम चाहते हैं कि इस अनुभाग को आइकन पट्टी के शुरू होने के बाद दिखाई देने लगे। इसे प्राप्त करने के लिए हम animation- delay प्रॉपर्टी का उपयोग करेंगे।

.card.show .details {
  animation: show-detail-container 0.7s 0.5s forwards cubic-bezier(.54,-0.38,.34,1.42);
}

details अनुभाग में लागू एनीमेशन को 0.7 सेकंड की duration निर्धारित करने के लिए सेट किया गया है, और 0.5 सेकंड का delay। इसका अर्थ है कि एनीमेशन तब तक शुरू नहीं होगा जब तक आइकन बार शुरू नहीं किया जाएगा।

हम यहां कुछ बाउंस देने के लिए यहां एक क्यूबिक बीज़ियर टाइमिंग फ़ंक्शन का उपयोग करते हैं।

अगला हम इस कंटेनर एनीमेशन के लिए कीफ्रेम परिभाषित करते हैं।

@keyframes show-detail-container {
  0% {
    height: 0;
  }
  100% {
    height: 13.5em;
  }
}

show-detail-container एनीमेशन केफ़्रेम कंटेनर से शून्य की ऊंचाई के साथ अदृश्य होकर शुरू होता है, और पूर्ण ऊंचाई पर एनिमेटेड होता है। क्यूबिक बेज़ियर टाइमिंग फ़ंक्शन तब एनीमेशन को कुछ उछाल देने के लिए थोड़ी देर तक चलती है।

मल्टीपल एनिमेशन का संयोजन

एकाधिक एनिमेशन को एक एकल संपत्ति में लागू किया जा सकता है। जब तक एनिमेशन एक-दूसरे के साथ संघर्ष न करें (उसी संपत्ति को चेतन करने की कोशिश करके), वे एनीमेशन के लिए सूक्ष्मता जोड़ने के लिए उपयोग किए जा सकते हैं। एकाधिक एनिमेशन को सिर्फ एक एनिमेशन की तरह परिभाषित किया गया है, लेकिन अल्पविराम द्वारा अलग किया गया है।

इस मामले में हम हेडशॉट, नाम और विवरण सामग्री में फीड होने जा रहे हैं, जबकि एक ही समय में pop-in फ़ंक्शन का इस्तेमाल करते हुए उन्हें दूर दूरी से ज़ूम दिखाई देते हैं।

अगर हम एक एकल एनीमेशन का इस्तेमाल करते हैं, तो एक क्यूबिक बीज़ियर टाइमिंग फ़ंक्शन के साथ, फीड इफ़ेक्ट बाउंस करने के लिए दिखाई देगा और अजीब लग जाएगा। इसके बजाय, हम फीका एक रेखीय समय समारोह का उपयोग करेंगे और ज़ूम में बाउंस इफ़ेक्ट होगा।

सबसे पहले हम pop-in कीफ्रेम को परिभाषित करते हैं।

@keyframes pop-in {
  0% {
    transform: scale(0.7);
  }
  100% {
    transform: scale(1);
  }
}

यह प्रत्येक तत्व को छोटा करना और उनके सामान्य आकार तक का स्तर बढ़ाने के लिए scaleपर रूपांतरण का उपयोग करता है।

चलो सामग्री में लाना। प्रत्येक तत्व के दो एनिमेशन हैं, और प्रत्येक तत्व में उनके दिखने के लिए थोड़ी देर तक एनीमेशन विलंब होता है।

.card.show .headshot img {
  animation: fade-in 0.4s 1.2s forwards, pop-in 0.6s 1.2s forwards cubic-bezier(.64,1.87,.64,.64);
}
.card.show .name {
  animation: fade-in 0.3s 1.3s forwards, pop-in 0.3s 1.3s forwards cubic-bezier(.64,1.87,.64,.64);
}
.card.show .description {
  animation: fade-in 0.3s 1.4s forwards, pop-in 0.3s 1.4s forwards cubic-bezier(.64,1.87,.64,.64);
}

आइकन बंद करें

निकट आइकन एनीमेशन हम पहले परिभाषित fade-in कीफ्रेम का उपयोग करता है।

.card.show .close {
  animation: fade-in 0.3s 1.3s forwards;
}

कार्रवाई करने के लिए कॉल

अब हमें सिर्फ आइकनों को दिखाने की जरूरत है। एनीमेशन पेश करते समय, एनिमेटेड अंतिम बात यह है कि दर्शक का ध्यान समाप्त हो जाएगा। इसका मतलब यह है कि दर्शकों की आंख एनीमेशन का पालन करेंगे और उन आइकनों को देखकर खत्म करेंगे जिन्हें हम चुनना चाहते हैं।

हम इसके लिए एनीमेशन देरी सम्पत्ति का फिर से उपयोग करेंगे ताकि वे यह सुनिश्चित कर सकें कि वे आखिरकार पेश किए गए हैं। पहले हम माउस के लिए एनीमेशन के कीफ्रेम को परिभाषित करते हैं:

@keyframes show-icon {
  0% {
    opacity: 0;
    transform: rotateZ(-40deg);
  }
  100% {
    opacity: 1;
    transform: rotateZ(0);
  }
}

प्रत्येक चिह्न छोटे रूप में स्पिन कर देगा जैसे वे फीका पड़ते हैं। हम अब प्रत्येक एनीमेशन को इस एनीमेशन को संलग्न कर सकते हैं, जिससे उन्हें विलंब के लिए प्रत्येक पर विलंब का उपयोग किया जा सकता है।

.card.show .icon-bar li {
  animation: show-icon 0.5s forwards cubic-bezier(.64,1.87,.64,.64);
}

.card.show .icon-bar li:nth-child(1) {
  animation-delay: 1.8s;
}
.card.show .icon-bar li:nth-child(2) {
  animation-delay: 1.9s;
}
.card.show .icon-bar li:nth-child(3) {
  animation-delay: 2s;
}

इन सब को एक साथ रखो और हमारे पास अब एक ऐसा कार्ड है जो अच्छा होता है जब बटन का चयन किया जाता है।

एक और चीज़

इससे पहले कि हम समाप्त कर सकें, हमें क्लोज बटन में एक hide ऐक्शन जोड़ना होगा और कार्ड को दूर करना होगा। पहले हम JavaScript को अपडेट करेंगे। close आइकन दबाकर, JavaScript प्रदर्शन के साथ कार्ड को हटाने से पहले एक सेकंड के लिए इंतजार करता है display: none।

$('.show-card').click(function(e) {
  $('.card').addClass('show').css('display', 'block');
  $('.show-card').addClass('hide');
});

$('.card .close').click(function(e) {
  $('.card').addClass('hide');
  setTimeout(function() {
    $('.card').css('display', 'none').removeClass('show').removeClass('hide');
  }, 1000);
  $('.show-card').removeClass('hide');
});

यह हमें कार्ड को चेतन करने के लिए एक सेकंड देता है- हम इसे स्क्रीन के निचले भाग से निकाल देंगे I यह हासिल करने वाले कीफ्रम्स इस प्रकार हैं:

@keyframes drop-card {
  100% {
    bottom: -100%;
    transform: rotateZ(20deg);
    opacity: 0;
  }
}

फिर हम इसे कार्ड में एनीमेशन के रूप में लागू करते हैं।

.card.hide {
  animation: drop-card 1s forwards cubic-bezier(.54,-0.38,.34,1.42);
}

डेमो

इसे एक साथ रखकर, आप परिणाम यहां देख सकते हैं।

उपसर्गों और ब्राउज़र संगतता पर एक नोट

एनिमेशन सभी ब्राउज़रों में well supported हैं। आपके दर्शकों के आधार पर, उन्हें सबसे अधिक स्थितियों में काम करना चाहिए। यह सुनिश्चित करने के लायक है कि बुनियादी शो और छिपाने के कार्य और किसी एनीमेशन को एक progressive enhancement के रूप में जोड़ा गया है।

सारांश

कई एनिमेशन, और विशेषकर animation-delay की संपत्ति के उपयोग के माध्यम से, हमने एक बहुत सरल विजेट बनाया है और इसे और अधिक आकर्षक बना दिया है। एनीमेशन दर्शकों को प्रत्येक तत्व के माध्यम से मार्गदर्शित करता है और उन्हें कॉल टू एक्शन की ओर निर्देशित करता है।

एनिमेशन आपके डिजाइनों के भीतर संवाद करने का एक शानदार तरीका हो सकता है। यह संचार आगंतुकों को आपकी मंशा को समझने के साथ-साथ आपके कार्य की गुणवत्ता में विश्वसनीयता और आत्मविश्वास को बेहतर बनाने में सहायता करता है।