अंतिम फ्रेम पर एक CSS3 एनीमेशन रोकना

Question

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

हालाँकि, यह हमेशा अपनी मूल स्थिति में चला जाता है जब यह खेला जाता है। किसी को भी पता है कि मैं इसे अपने आखिरी सीएसएस फ्रेम (100%) पर कैसे रोक सकता हूं , या फिर इसे खेलने के दौरान पूरी डिव से कैसे छुटकारा पाया जाए।

@keyframes colorchange {
  0%   { transform: scale(1.0) rotate(0deg); }
  50%  { transform: rotate(340deg) translate(-300px,0px) }
  100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}

Comments

हे निक, क्या आप जिस css और html का उपयोग कर रहे हैं, उसे पोस्ट कर सकते हैं?

— सेबस्टियन पटाने मसुअली

हाय सेबस्टियन, मैंने अपने प्रश्न को सीएसएस और जावास्क्रिप्ट के साथ अद्यतन किया है। केवल html जो मैं उपयोग कर रहा हूं, वह फ़ंक्शन घुमाव शुरू करने के लिए एक onclick के साथ एक div है।

— user531192

एक चक्र के अंत में एनीमेशन को रोकना

— MP24letier

Answer 1

आप देख रहे हैं:

animation-fill-mode: forwards;

MDN पर अधिक जानकारी और canIuse पर ब्राउज़र समर्थन सूची ।

Comments

क्या आपको पता है कि क्रोम में काम करता है? इसके साथ कोई भाग्य नहीं है

— user531192

कृपया इसे सही उत्तर के रूप में स्वीकार करें। इस पर अधिक विवरण: 4waisenkinder.de/blog/2014/10/13/…

— miron

@ user531192 क्रोम / वेबकिट ब्राउज़र के लिए आपको उपयोग करना होगा -webkit-animation-fill-mode: forwards;

— eivindml

Chrome को -webkit- अब उपसर्ग की आवश्यकता नहीं है (कम से कम v49 से)

— कैप्सूल

एक मुद्दा जो मेरे पास था वह यह था कि मेरे पास एक सेट 100% {}या to {}सेट नहीं था , इसलिए animation-fill-mode: forwards;मेरे एनीमेशन के साथ मुझे अभी भी डंप करना होगा 0%। (मैं अपने एनिमेशन बनाने के लिए कुछ @for loops का उपयोग कर रहा था और मैन्युअल रूप से जोड़ना भूल गया था ) from{}और to{};

— फिल ट्यून

Answer 2

यदि आप इस व्यवहार को शॉर्टहैंड animationप्रॉपर्टी परिभाषा में जोड़ना चाहते हैं, तो उप-गुणों का क्रम निम्नानुसार है

animation-name- डिफ़ॉल्ट none

animation-duration- डिफ़ॉल्ट 0s

animation-timing-function- डिफ़ॉल्ट ease

animation-delay- डिफ़ॉल्ट 0s

animation-iteration-count- डिफ़ॉल्ट 1

animation-direction- डिफ़ॉल्ट normal

animation-fill-mode- आपको इसे सेट करने की आवश्यकता है forwards

animation-play-state- डिफ़ॉल्ट running

इसलिए सबसे आम मामले में, परिणाम कुछ इस तरह होगा

animation: colorchange 1s ease 0s 1 normal forwards;

एमडीएन प्रलेखन यहाँ देखें

Answer 3

-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;

ब्राउज़र का समर्थन

• क्रोम 43.0 (4.0 -webkit-)
• IE 10.0
• मोज़िला 16.0 (5.0 -moz-)
• शफ़री 4.0 -बेटक-
• ओपेरा 15.0 -webkit- (12.112.0 -o-)

उपयोग: -

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

    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;

     animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}


@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

Answer 4

सबसे अच्छा तरीका सीएसएस के मुख्य भाग पर अंतिम स्थिति डाल रहा है। यहाँ की तरह, मैंने चौड़ाई डाल दी 220px, ताकि यह अंततः बन जाए 220px। लेकिन शुरू हो रहा है0px;

div.menu-item1 {
  font-size: 20px;
  border: 2px solid #fff;
  width: 220px;
  animation: slide 1s;
  -webkit-animation: slide 1s; /* Safari and Chrome */
}
@-webkit-keyframes slide { /* Safari and Chrome */
  from {width:0px;}
  to {width:220px;}
}  

Comments

यह महान है, इस समस्या से निपटने का सबसे अच्छा तरीका मुझे लगता है।

— ड्रू बेकर

यदि आप एक एनीमेशन-देरी का उपयोग करते हैं, तो यह अंतिम स्थिति से शुरू होता है, 0% तक रीसेट करता है, फिर 100% तक एनिमेट करता है। आदर्श और नेत्रहीन नहीं।

— डेबोरा

Answer 5

क्या आपकी समस्या यह नहीं है कि आप webkitAnimationName को वापस सेट कर रहे हैं, ताकि आपके सीएसएस को डिफ़ॉल्ट स्थिति में वापस करने के लिए CSS को रीसेट किया जा सके। यदि आप राज्य को रीसेट करने वाले सेटटाइमआउट फ़ंक्शन को हटा देते हैं, तो यह उस स्थान पर नहीं रहेगा जहां यह समाप्त हो गया है?

Answer 6

मैंने बस एक समान उत्तर पोस्ट किया है, और आप शायद एक नज़र रखना चाहते हैं:

http://www.w3.org/TR/css3-animations/#animation-events-

आप एनीमेशन के पहलुओं का पता लगा सकते हैं, जैसे कि प्रारंभ और रोक, और फिर, एक बार 'स्टॉप' घटना को निकाल दिया गया है जो आप बोल सकते हैं कि आप डोम पर जो चाहें कर सकते हैं। मैंने कुछ समय पहले इसकी कोशिश की थी, और यह काम कर सकता है, लेकिन मुझे लगता है कि आप इस समय के लिए वेबकिट तक ही सीमित रहने वाले हैं (लेकिन आपने शायद पहले ही स्वीकार कर लिया है)। Btw, जब से मैंने 2 उत्तरों के लिए एक ही लिंक पोस्ट किया है, मैं इस सामान्य सलाह की पेशकश करूंगा: W3C की जांच करें - वे बहुत नियम लिखते हैं और मानकों का वर्णन करते हैं। इसके अलावा, वेबकिट विकास पृष्ठ बहुत महत्वपूर्ण हैं।

Answer 7

कोई भी वास्तव में इसे नहीं लाया, जिस तरह से यह काम करने के लिए बनाया गया था वह एनीमेशन-प्ले-स्टेट सेट को रोक दिया गया था।

Answer 8

मैंने आज सीखा कि एक ऐसी सीमा है जिसे आप भरण-विधि के लिए उपयोग करना चाहते हैं। यह एक Apple देव से है। अफवाह * छह * के आसपास है, लेकिन निश्चित नहीं है। वैकल्पिक रूप से, आप अपनी कक्षा की प्रारंभिक स्थिति को सेट कर सकते हैं कि आप एनीमेशन को कैसे समाप्त करना चाहते हैं, फिर इसे * 0% से * प्रारंभ करें *।