শেষ ফ্রেমে একটি CSS3 অ্যানিমেশন বন্ধ করা হচ্ছে

Question

আমার ক্লিকে একটি 4 অংশ সিএসএস 3 অ্যানিমেশন চলছে - তবে অ্যানিমেশনের শেষ অংশটি এটি স্ক্রিন থেকে নামানোর জন্য।

তবে এটি একবার খেলে এটি সর্বদা তার আসল অবস্থায় ফিরে যায়। যে কেউ জানেন যে আমি কীভাবে এটির শেষ সিএসএস ফ্রেমে (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 এবং জাভাস্ক্রিপ্ট দিয়ে আপডেট করেছি updated আমি কেবলমাত্র এইচটিএমএল ব্যবহার করছি ফাংশনটি ঘোরানো শুরু করতে অনক্লিকের সাথে একটি ডিভ div

— user531192

— কোনও

Answer 1

তুমি খুঁজছ:

animation-fill-mode: forwards;

এমডিএন এবং ক্যানআইউসে ব্রাউজার সমর্থন তালিকার আরও তথ্য ।

Comments

আপনি যদি জানেন যে এটি ক্রোমে কাজ করে? এটির সাথে কোনও ভাগ্য নেই

— user531192

দয়া করে এটি সঠিক উত্তর হিসাবে গ্রহণ করুন। এ সম্পর্কে আরও ব্যাখ্যা: 4waisenkinder.de/blog/2014/10/13/…

— মিরন

@ ব্যবহারকারী531192 ক্রোম / ওয়েবকিট ব্রাউজারগুলির জন্য আপনাকে ব্যবহার করতে হবে -webkit-animation-fill-mode: forwards;

— eivindML

ক্রোম -webkit- উপসর্গ (অন্তত v49 থেকে) আর এখন দরকার নেই

— ক্যাপসুল

এটির সাথে আমার একটি সমস্যা ছিল যে আমার কাছে কোনও সেট 100% {}বা to {}সেট ছিল না, তাই animation-fill-mode: forwards;আমার অ্যানিমেশন সহ এখনও আমাকে এড়িয়ে যায় 0%। (আমি আমার অ্যানিমেশনগুলি তৈরি করতে কয়েকটি @ লুপ ব্যবহার করছি এবং ম্যানুয়ালি একটি 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;

এখানে MDN ডকুমেন্টেশন দেখুন

Answer 3

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

ব্রাউজার সমর্থন

• ক্রোম 43.0 (4.0 -webkit-)
• আইই 10.0
• মজিলা 16.0 (5.0 -মোজ-)
• শাফারি ৪.০-ওয়েবেকিট-
• অপেরা 15.0-ওয়েবেকিট- (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

এটি দুর্দান্ত, আমি মনে করি এই সমস্যাটি মোকাবেলার সেরা উপায়।

— ড্রু বেকার

Answer 5

আপনার সমস্যাটি নয় যে আপনি ওয়েবকিটঅ্যানিমেশন নামটি কোনও কিছুতেই ফিরে আসছেন না যাতে এটি আপনার অবজেক্টের জন্য সিএসএসকে পূর্বনির্ধারিত অবস্থায় ফিরিয়ে আনতে পারে। আপনি যদি কেবলমাত্র রাষ্ট্রটি পুনরায় সেট করে দেওয়ার সেটটাইমআউট ফাংশনটি সরিয়ে ফেলেন তবে এটি কোথায় শেষ হবে না?

Answer 6

আমি সবেমাত্র একটি অনুরূপ উত্তর পোস্ট করেছি এবং আপনি সম্ভবত এটি দেখতে চান:

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

আপনি অ্যানিমেশনের দিকগুলি যেমন স্টার্ট এবং স্টপগুলি সন্ধান করতে পারেন এবং তারপরে একবার 'থামুন' ইভেন্টটি বললে আপনি ডোমটিতে যা চান তা করতে পারেন। আমি কিছুক্ষন আগে এটি চেষ্টা করেছিলাম, এবং এটি কার্যকর হতে পারে তবে আমি অনুমান করতে পারি যে আপাতত ওয়েবকিটে সীমাবদ্ধ থাকব (তবে আপনি সম্ভবত এটি ইতিমধ্যে গ্রহণ করেছেন)। বিটিডব্লু, যেহেতু আমি ২ টি জবাবের জন্য একই লিঙ্কটি পোস্ট করেছি, আমি এই সাধারণ পরামর্শটি দেব: ডাব্লু 3 সি দেখুন - তারা বেশিরভাগ নিয়ম লেখেন এবং মানগুলি বর্ণনা করেন। এছাড়াও, ওয়েবকিট বিকাশের পৃষ্ঠাগুলি বেশ চাবিকাঠি।

Answer 7

বাস্তবে কেউ এটিকে এনে দেয়নি, এটি যেভাবে কাজ করা হয়েছিল তা হ'ল অ্যানিমেশন-প্লে- স্টেটটি বিরতিতে সেট করা।

Answer 8

আমি আজ শিখেছি যে আপনি ফিল-মোডের জন্য ব্যবহার করতে চান এমন একটি সীমা রয়েছে। এটি একটি অ্যাপল দেব থেকে। গুজব * প্রায় * ছয়টার কাছাকাছি, তবে নির্দিষ্ট নয়। বিকল্পভাবে, আপনি কীভাবে অ্যানিমেশনটি শেষ হতে চান তার জন্য আপনি আপনার শ্রেণীর প্রাথমিক অবস্থা সেট করতে পারেন, তারপরে এটি / ইনিশিয়েশন * / 0% থেকে করুন।