सीएसएस एनीमेशन को दोहराने में देरी

Question

मैंने हाल ही में सीएसएस एनिमेशन का "ठीक से" उपयोग करने का तरीका खोजा है (पहले मैंने उन्हें बर्खास्त कर दिया था क्योंकि आप जैसे जावास्क्रिप्ट में जटिल अनुक्रम नहीं बना सकते थे)। इसलिए अब मैं उनके बारे में जान रहा हूं।

इस आशय के लिए, मैं एक प्रगति पट्टी जैसे तत्व में एक ढाल "भड़क" स्वीप करने की कोशिश कर रहा हूं। देशी Windows Vista / 7 प्रगति सलाखों पर प्रभाव के समान।

@keyframes barshine {
  from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
  to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);}
}
.progbar {
  animation: barshine 1s 4s linear infinite;
}

जैसा कि आप देख सकते हैं, मैं 4 सेकंड की देरी करने की कोशिश कर रहा हूं, इसके बाद 1 सेकंड में शाइन स्वीपिंग दोहराई जाती है।

हालाँकि, ऐसा लगता है कि animation-delay एकमात्र पहले पुनरावृत्ति पर लागू होता है, जिसके बाद चमक सिर्फ बार-बार स्वीप करती है।

मैंने इस मुद्दे को इस प्रकार "हल" किया:

@keyframes expbarshine {
  from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
  80% {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
  to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);}
}
.progbar {
  animation: barshine 5s linear infinite;
}

fromऔर 80%वास्तव में समान हैं, जिसके परिणामस्वरूप एनीमेशन की लंबाई का 80% "देरी" है।

यह काम करता है, लेकिन मेरे अगले एनीमेशन के लिए, मुझे वेरिएबल (किसी विशेष तत्व के लिए स्थिर, लेकिन एनीमेशन का उपयोग करने वाले तत्वों के बीच निरंतर) में देरी की आवश्यकता है, जबकि एनीमेशन स्वयं एक ही लंबाई रहता है।

उपरोक्त "समाधान" के साथ, मैं धीमे एनीमेशन के साथ समाप्त हो जाऊंगा जब मैं चाहता हूं कि एक लंबा विलंब हो।

क्या animation-delayपहले के बजाय सभी पुनरावृत्तियों पर लागू होना संभव है ?

Comments

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

— Ry-

Answer 1

मुझे भी इसी तरह की समस्या थी और मैंने इसका इस्तेमाल किया

@-webkit-keyframes pan {
   0%, 10%       { -webkit-transform: translate3d( 0%, 0px, 0px); }
   90%, 100%     { -webkit-transform: translate3d(-50%, 0px, 0px); }
}

बिट इरिटेटिंग जो आपको 'देरी' के लिए या तो समाप्ति पर अपनी अवधि को नकली करना है।

Answer 2

मिनीटेक सही है जिसमें animation-delayएनीमेशन शुरू होने से पहले देरी को निर्दिष्ट करता है और पुनरावृत्तियों के बीच देरी नहीं । कल्पना के संपादकों के मसौदे में इसका अच्छी तरह से वर्णन किया गया है और इस विशेषता की चर्चा है कि आप यहाँ वर्णन कर रहे हैं जो इस चलना विलंब सुविधा का सुझाव दे रहा है।

जबकि JS में वर्कअराउंड हो सकता है, आप केवल CSS का उपयोग करते हुए प्रगति बार फ्लेयर के लिए इस पुनरावृत्ति विलंब को नकली कर सकते हैं।

भड़कीले डिव position:absoluteऔर पैरेंट डिव की घोषणा करके overflow: hidden, प्रगति बार की चौड़ाई की तुलना में 100% कीफ्रेम राज्य की स्थापना, और क्यूबिक-बेज़ियर टाइमिंग फ़ंक्शन और ऑफ़सेट वैल्यूज़ के साथ चारों ओर खेलना , आप एक ease-in-outया linearसमय का अनुकरण करने में सक्षम हैं देरी"।

यह बिल्कुल सही पाने के लिए बाईं ओर ऑफसेट और समय फ़ंक्शन की गणना करने के लिए एक कम / scss मिक्सिन लिखना दिलचस्प होगा, लेकिन मेरे पास इसके साथ फ़ाइड करने के लिए समय नहीं है। हालांकि ऐसा कुछ देखना पसंद करेंगे!

यहाँ एक डेमो है जिसे मैंने इसे दिखाने के लिए एक साथ फेंक दिया। (मैंने विंडोज 7 प्रगति बार का अनुकरण करने की कोशिश की और थोड़ा कम हो गया, लेकिन यह दर्शाता है कि मैं किस बारे में बात कर रहा हूं)

डेमो: http://codepen.io/timothyasp/full/HlzGu

<!-- HTML -->
<div class="bar">
   <div class="progress">
      <div class="flare"></div>
   </div>
</div>


/* CSS */

@keyframes progress {
  from {
    width: 0px;
  }
  to {
    width: 600px;
  }
}

@keyframes barshine {
  0% {
    left: -100px;
  }

  100% {
    left: 1000px;
  }
}
.flare {
  animation-name: barshine;
  animation-duration: 3s;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.14, .75, .2, 1.01);
  animation-iteration-count: infinite;
  left: 0;
  top: 0;
  height: 40px;
  width: 100px;
  position: absolute;
  background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.69) 0%, rgba(255,255,255,0) 87%); /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.69)), color-stop(87%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* IE10+ */
  background: radial-gradient(ellipse at center,  rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  z-index: 10;
}
.progress {
  animation-name: progress;
  animation-duration: 10s;
  animation-delay: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  overflow: hidden;
  position:relative;
  z-index: 1;
  height: 100%;
  width: 100%;
  border-right: 1px solid #0f9116;
  background: #caf7ce; /* Old browsers */
  background: -moz-linear-gradient(top, #caf7ce 0%, #caf7ce 18%, #3fe81e 45%, #2ab22a 96%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#caf7ce), color-stop(18%,#caf7ce), color-stop(45%,#3fe81e), color-stop(96%,#2ab22a)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* IE10+ */
  background: linear-gradient(to bottom, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#caf7ce', endColorstr='#2ab22a',GradientType=0 ); /* IE6-9 */
}

.progress:after {
  content: "";
  width: 100%;
  height: 29px;
  right: 0;
  bottom: 0;
  position: absolute;
  z-index: 3;
  background: -moz-linear-gradient(left, rgba(202,247,206,0) 0%, rgba(42,178,42,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(202,247,206,0)), color-stop(100%,rgba(42,178,42,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* IE10+ */
  background: linear-gradient(to right, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00caf7ce', endColorstr='#2ab22a',GradientType=1 ); /* IE6-9 */
}

.bar {
  margin-top: 30px;
  height: 40px;
  width: 600px;
  position: relative;
  border: 1px solid #777;
  border-radius: 3px;
}

Comments

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

— जोनाथन।

Answer 3

यही आपको करना चाहिए। इसमें काम करना चाहिए कि आपके पास 1 सेकंड का एनीमेशन है, फिर पुनरावृत्तियों के बीच 4 सेकंड की देरी:

@keyframes barshine {
  0% {
  background-image:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);
  }
  20% {
    background-image:linear-gradient(120deg,rgba(255,255,255,0) 10%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);
  }
}
.progbar {
  animation: barshine 5s 0s linear infinite;
}

इसलिए मैं इसके साथ बहुत खिलवाड़ कर रहा हूं और आप इसे बहुत हैक किए बिना कर सकते हैं। यह एनीमेशन पुनरावृत्तियों के बीच देरी में लगाने का सबसे सरल तरीका है कि 1. सुपर आसान और 2. बस थोड़ा तर्क लगता है। मेरे द्वारा बनाए गए इस नृत्य एनीमेशन को देखें:

.dance{
  animation-name: dance;
  -webkit-animation-name: dance;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-duration: 2.5s;
  -webkit-animation-duration: 2.5s;

  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s;
  animation-timing-function: ease-in;
  -webkit-animation-timing-function: ease-in;

}
@keyframes dance {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(-120deg);
    -moz-transform: rotate(-120deg);
    -o-transform: rotate(-120deg);
    -ms-transform: rotate(-120deg);
    transform: rotate(-120deg);
  }
  50% {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@-webkit-keyframes dance {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  20% {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  40% {
    -webkit-transform: rotate(-120deg);
    -moz-transform: rotate(-120deg);
    -o-transform: rotate(-120deg);
    -ms-transform: rotate(-120deg);
    transform: rotate(-120deg);
  }
  60% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  80% {
    -webkit-transform: rotate(-120deg);
    -moz-transform: rotate(-120deg);
    -o-transform: rotate(-120deg);
    -ms-transform: rotate(-120deg);
    transform: rotate(-120deg);
  }
  95% {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
  }
}

मैं वास्तव में यह जानने की कोशिश कर रहा था कि एनीमेशन में देरी कैसे हो सकती है, जब मुझे एहसास हुआ कि आप सिर्फ 1. एनीमेशन की अवधि बढ़ाते हैं और प्रत्येक एनीमेशन के लिए समय के अनुपात को शर्ट करते हैं। Beore मैं उन्हें 2.5 सेकंड की कुल अवधि के लिए प्रत्येक स्थायी .5 सेकंड था। अब मैं कहता हूं कि मैं कुल अवधि के बराबर देरी जोड़ना चाहता था, इसलिए 2.5 सेकंड की देरी।

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

@-webkit-keyframes dance {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  10% {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  20% {
    -webkit-transform: rotate(-120deg);
    -moz-transform: rotate(-120deg);
    -o-transform: rotate(-120deg);
    -ms-transform: rotate(-120deg);
    transform: rotate(-120deg);
  }
  30% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  40% {
    -webkit-transform: rotate(-120deg);
    -moz-transform: rotate(-120deg);
    -o-transform: rotate(-120deg);
    -ms-transform: rotate(-120deg);
    transform: rotate(-120deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

कुल मिलाकर:

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

वांछित_परिवर्तन = एक्स

वांछित_परिवर्तन = एनीमेशन_पार्टी_परिवर्तन 1 + एनीमेशन_परिवर्तन 2 + ... (और इसी तरह)

वांछित_दले = य

कुल अवधि = x + y

एनीमेशन_पार्टर_ड्यूरेशन 1_actual = एनीमेशन_पार्टर_डैरेस्ट 1 * वांछित_परिवर्तन / कुल_ड्यूरेशन

Comments

फ्रेंच स्पॉटेड :) (मैं फ्रेंच भी हूँ, चिंता मत करो)

— julesbou

Answer 4

मैं सीएसएस को कम प्रबंधनीय बनाने के बजाय थोड़ा जावास्क्रिप्ट लिखूंगा।

सबसे पहले, डेटा विशेषता परिवर्तन पर केवल CSS एनीमेशन लागू करें:

.progbar[data-animation="barshine"] {
    animation: barshine 1s linear;
}

फिर आधे विलंब राशि पर एनीमेशन टॉगल करने के लिए जावास्क्रिप्ट जोड़ें।

var progbar = document.querySelector('.progbar');
var on = false;

setInterval(function () {
    progbar.setAttribute('data-animation', (on) ? 'barshine' : '');
    on = !on;
}, 3000);

या यदि आप नहीं चाहते कि एनीमेशन तब छिपा हो जब टैब छिपा हो:

var progbar = document.querySelector('.progbar');
var on = false;

var update = function () {
    progbar.setAttribute('data-animation', (on) ? 'barshine' : '');
    on = !on;
    setTimer();
};

var setTimer = function () {
    setTimeout(function () {
        requestAnimationFrame(update);
    }, 3000);
};

setTimer();

Answer 5

मैंने दीवार पर एक पोस्टर बनाया जो अंतराल के साथ बाएं और दाएं चलता है। मेरे लिए यह काम करता है:

.div-animation {
   -webkit-animation: bounce 2000ms ease-out;
    -moz-animation: bounce 2000ms ease-out;
    -o-animation: bounce 2000ms ease-out;
    animation: bounce 2000ms ease-out infinite;
    -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
    animation-delay: 2s;
    transform-origin: 55% 10%;    
}

@-webkit-keyframes bounce {
    0% {
        transform: rotate(0deg);
    }
    3% {
        transform: rotate(1deg);
    }
    6% {
        transform: rotate(2deg);
    }
    9% {
        transform: rotate(3deg);
    }
    12% {
        transform: rotate(2deg);
    }
    15% {
        transform: rotate(1deg);
    }
    18% {
        transform: rotate(0deg);
    }
    21% {
        transform: rotate(-1deg);
    }
    24% {
        transform: rotate(-2deg);
    }
    27% {
        transform: rotate(-3deg);
    }
    30% {
        transform: rotate(-2deg);
    }
    33% {
        transform: rotate(-1deg);
    }
    36% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

Answer 6

एक और तरीका है कि आप एनिमेशन के बीच एक ठहराव प्राप्त कर सकते हैं एक दूसरा एनीमेशन लागू करना है जो आपको वांछित देरी के लिए तत्व को छुपाता है। यह आपको सामान्य रूप से सीएसएस सहजता फ़ंक्शन का उपयोग करने की अनुमति देने का लाभ है।

.star {
  animation: shooting-star 1000ms ease-in-out infinite,
    delay-animation 2000ms linear infinite;
}

@keyframes shooting-star {
  0% {
    transform: translate(0, 0) rotate(45deg);
  }

  100% {
    transform: translate(300px, 300px) rotate(45deg);
  }
}

@keyframes delay-animation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  50.01% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

यह केवल तभी काम करता है जब आप चाहते हैं कि एनीमेशन अवधि के कई होने में देरी हो। शूटिंग सितारों की बौछार को और अधिक यादृच्छिक बनाने के लिए मैंने इसका उपयोग किया: https://codepen.io/ericdjohnson/pen/GRpOVVO

Answer 7

एक छोटा सा टुकड़ा है कि 75% समय के लिए एक ही बात दिखाता है, तो यह स्लाइड। यह दोहराने स्कीमा अच्छी तरह से देरी का अनुकरण करता है:

@-webkit-keyframes slide    {
0%   {background-position: 0 0;}
25%  {background-position: 0 0;}
50%  {background-position: 0 0;}
75%  {background-position: 0 0;}
100% {background-position: 13em 0;}
}

@-moz-keyframes slide       {
0%   {background-position: 0 0;}
25%  {background-position: 0 0;}
50%  {background-position: 0 0;}
75%  {background-position: 0 0;}
100% {background-position: 13em 0;}
}

@keyframes slide            {
0%   {background-position: 0 0;}
25%  {background-position: 0 0;}
50%  {background-position: 0 0;}
75%  {background-position: 0 0;}
100% {background-position: 13em 0;}
}

Answer 8

शुरुआत में केवल एक बार अनंत के साथ देरी संभव है। क्रमबद्ध देरी में अनंत लूप के साथ काम नहीं करता है। इसके लिए आपको keyframes एनीमेशन ब्लैंक उदाहरण रखना होगा:

@-webkit-keyframes barshine {
  10% {background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
    }
  60% {background: -webkit-linear-gradient(top, #7db9e8 0%,#d32a2d 100%);}
}

यह 10% से 60% तक चेतन करेगा और 40% अधिक पूरा करने के लिए प्रतीक्षा करेगा। तो 40% देरी से आता है।

फिडेल उदाहरण खोजें

Answer 9

मुझे पता है कि यह पुराना है, लेकिन मैं इस पोस्ट में उत्तर की तलाश में था और jquery के साथ आप इसे आसानी से और बहुत अधिक परेशानी के बिना कर सकते हैं। बस अपने एनिमेशन कीफ्रेम को सीएसएस में घोषित करें और उन वर्गों के साथ सेट करें जिन्हें आप चाहते हैं। मेरा मामला मैंने css चेतन से टैडा एनीमेशन का उपयोग किया है:

.tada {
    -webkit-animation-name: tada;
    animation-name: tada;
    -webkit-animation-duration: 1.25s;
    animation-duration: 1.25s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

मैं चाहता था कि एनीमेशन हर 10 सेकंड में चला जाए इसलिए jquery सिर्फ कक्षा जोड़ता है, 6000ms (एनीमेशन समाप्त होने के लिए पर्याप्त समय) के बाद यह कक्षा को हटा देता है और 4 सेकंड बाद यह फिर से कक्षा जोड़ता है और इसलिए एनीमेशन फिर से शुरू होता है।

$(document).ready(function() {
  setInterval(function() {

    $(".bottom h2").addClass("tada");//adds the class

    setTimeout(function() {//waits 6 seconds to remove the class
      $(".bottom h2").removeClass("tada");
    }, 6000);

  }, 10000)//repeats the process every 10 seconds
});

मुश्किल नहीं एक आदमी की तरह पोस्ट किया।

Comments

मुझे यकीन नहीं है कि आप इसके लिए jQuery का उपयोग क्यों करेंगे .classList.add("tada"): D

— नीट द डार्क एब्सॉल

मुझे यह याद रखना आसान है कि मुझे लगता है ... और आपको jquery का उपयोग करने की आवश्यकता नहीं है, आप 3 जावास्क्रिप्ट लाइनें लिख सकते हैं यदि आप jquery के साथ केवल 1 के बजाय चाहते हैं, तो यह कोड लिखने वाले व्यक्ति के लिए पूरी तरह से है :)

— मार्कोस सिल्वा लेप

मुझे पता नहीं है, $(".bottom h2").addClass("tada")और document.querySelector(".bottom h2").classList.add("tada")इतने ही हैं कि यह लोडिंग / रनिंग jQuery कोड के लायक नहीं है: पी

— नीट द डार्क एब्सॉल

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

— मार्कोस सिल्वा लेप

Answer 10

आप सीएसएस के साथ अनंत एनिमेशन के बीच "नकली" देरी बना सकते हैं। इसे करने का तरीका चालाकी से आपके केफ़्रेम एनीमेशन बिंदुओं और आपकी एनीमेशन अवधि की गति को परिभाषित करता है।

उदाहरण के लिए, यदि हम उछलती गेंद को चेतन करना चाहते थे, और हम प्रत्येक उछाल के बीच एक अच्छा .5 से 1s विलंब चाहते थे, तो हम कुछ ऐसा कर सकते हैं:

@keyframes bounce{
    0%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(25%);
    }
    75%{
        transform: translateY(15%);
    }
    90%{
        transform: translateY(0%);
    }
    100%{
        transform: translateY(0);
    }
}

हम यह सुनिश्चित करते हैं कि गेंद 100% से बहुत पहले अपनी मूल स्थिति में वापस आ जाए। मेरे उदाहरण में, मैं इसे ९ ०% कर रहा हूं जिसने मुझे लगभग १ .१ देरी प्रदान की जो मेरे लिए काफी अच्छा था। लेकिन स्पष्ट रूप से आपके मामले के लिए, आप या तो अधिक महत्वपूर्ण फ़्रेम बिंदु जोड़ सकते हैं और परिवर्तन मान बदल सकते हैं।

इसके अलावा, आप अपने प्रमुख फ्रेम एनिमेशन को संतुलित करने के लिए अतिरिक्त एनीमेशन अवधि जोड़ सकते हैं।

उदाहरण के लिए:

 animation: bounce .5s ease-in-out infinite;

कहते हैं कि हम चाहते थे कि पूर्ण एनिमेशन .5s में समाप्त हो जाए, लेकिन हम एनिमेशन के बीच देरी में अतिरिक्त .2s चाहते थे।

 animation: bounce .7s ease-in-out infinite;

तो हम एक अतिरिक्त .2 s देरी जोड़ देंगे, और हमारे प्रमुख फ्रेम एनिमेशन में, हम .2s देरी के अंतराल में भरने के लिए अधिक प्रतिशत अंक जोड़ सकते हैं।

Comments

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

— Beppe

Answer 11

बॉर्डर फ्लैश के लिए: वास्तव में बहुत सरल है: 99% काले रंग से बदलें और जैसे कि नीले रंग में 1% की शिफ्ट आप इसे छोटा भी कर सकते हैं, एनिमेशन का समय उदा 5sec पर।

@keyframes myborder {
  0% {border-color: black;}
  99% {border-color:black;}
  100% {border-color: blue;}
 }