সিএসএস 3 অ্যানিমেশন শেষে চূড়ান্ত অবস্থা বজায় রাখা

Question

আমি সিএসএসে সেট থাকা কিছু উপাদানগুলিতে একটি অ্যানিমেশন চালাচ্ছি opacity: 0;। অ্যানিমেশন বর্গ onClick প্রয়োগ করা হয়, এবং, কীফ্রেমগুলি ব্যবহার করে, তা থেকে অস্বচ্ছতা পরিবর্তন 0করতে 1(অন্যান্য বিষয় ছাড়াও)।

দুর্ভাগ্যক্রমে, অ্যানিমেশনটি শেষ হয়ে গেলে, উপাদানগুলি opacity: 0ফায়ারফক্স এবং ক্রোম উভয় ক্ষেত্রে ফিরে যায় । আমার স্বাভাবিক চিন্তাভাবনাটি হ'ল অ্যানিমেটেড উপাদানগুলি তাদের মূল বৈশিষ্ট্যগুলিকে ওভাররাইড করে চূড়ান্ত অবস্থা বজায় রাখে। এটা কি সত্য নয়? এবং যদি না হয় তবে আমি কীভাবে এটির উপাদানটি পেতে পারি?

কোড (উপসর্গযুক্ত সংস্করণ অন্তর্ভুক্ত নয়):

@keyframes bubble {
    0%   { transform:scale(0.5); opacity:0.0; }
    50%  { transform:scale(1.2); opacity:0.5; }
    100% { transform:scale(1.0); opacity:1.0; }
}

Comments

আমি আমার নিজের পুনরাবৃত্তি বিজ্ঞপ্তি পোস্ট করব: stackoverflow.com/questions/9196694/css3-animation-scale কমপক্ষে আমার আরও শিক্ষামূলক শিরোনাম আছে!

— ড্যান

সিএসএস 3 অ্যানিমেটের

— মাইকেল মুল্লানি

Answer 1

যোগ করার চেষ্টা করুন animation-fill-mode: forwards;। উদাহরণস্বরূপ:

-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
        animation: bubble 1.0s forwards;

Comments

হ্যাঁ এটা। আমি যখন পারব তখন আপনার উত্তর যাচাই করবে। যদি কোনও সিএসএস-প্রধান প্রয়োজনীয় হওয়ার পিছনে যুক্তি সম্পর্কে মন্তব্য করতে চায় তবে আমি তা জানতে আগ্রহী!

— ড্যান

আপনি এখানে অ্যানিমেশন-ফিল-মোড সম্পত্তি সম্পর্কে পড়তে পারেন - dev.w3.org/csswg/css3-animations/#animation-fill-mode-property আশা করি এটি সাহায্য করে!

— ক্রিস্টোফার ভিল্যান্ডার

@Dan forwardsমান animation-fill-modeসম্পত্তি নিশ্চিত উপাদান অ্যানিমেশন শেষ হওয়ার পরে অ্যানিমেশন শেষ কীফ্রেম রাষ্ট্র রাখা হবে করে তোলে। উদাহরণস্বরূপ, যদি আপনার অ্যানিমেশন width0 থেকে 100px থেকে পরিবর্তিত হয়, এই সম্পত্তিটি অ্যানিমেশন শেষ হওয়ার পরে উপাদানটি 100px প্রশস্ত থাকবে তা নিশ্চিত করে।

— ফরজাদ ওয়াইজেড

100% / toবিন্দু নির্দিষ্ট করতে ভুলবেন না @keyframeঅন্যথায় এটি কাজ করবে না।

— টমাসজ মুলারস্কাইক

অ্যানিমেশন-ফিল-মোড: ফরোয়ার্ডগুলি আমার জন্যও কৌতুক করেছিল, তবে নিয়মে '! গুরুত্বপূর্ণ' যুক্ত করার পরে

— শায়ুন

Answer 2

আপনি যদি আরও অ্যানিমেশন বৈশিষ্ট্যগুলি ব্যবহার করছেন তবে শর্টহ্যান্ড হ'ল:

animation: bubble 2s linear 0.5s 1 normal forwards;

এটি দেয়:

• 2s স্থিতিকাল
• linear সময়জ্ঞান ফাংশনের
• 0.5s বিলম্ব
• 1 পুনরাবৃত্তি গণনা (অসীম হতে পারে)
• normal অভিমুখ
• forwards ফিল-মোড (শেষের অবস্থান হিসাবে চূড়ান্ত অবস্থা হিসাবে ব্যবহারের জন্য সামঞ্জস্য রাখতে চাইলে পিছনের দিকে সেট করুন)

Answer 3

যদি তা না হয় ব্যবহার দ্য সাঁটলিপি সংস্করণ: নিশ্চিত করুন animation-fill-mode: forwardsহয় পরে অ্যানিমেশন ঘোষণা বা এটি কাজ হবে না ...

animation-fill-mode: forwards;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;

বনাম

animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;

Comments

তুমি ঠিক বলছো. আমার উত্তর আপডেট। থ্যাঙ্কস, এটা আমার মন কেটে গেছে হা হা।

— টেলর এ। লিচ

Answer 4

অ্যানিমেশন-ফিল-মোড ব্যবহার করুন: এগিয়ে;

animation-fill-mode: forwards;

উপাদানটি সর্বশেষ কীফ্রেম (অ্যানিমেশন-দিকনির্দেশ এবং অ্যানিমেশন-পুনরাবৃত্তি-গণনার উপর নির্ভর করে) দ্বারা নির্ধারিত শৈলীর মানগুলি বজায় রাখবে।

দ্রষ্টব্য: @keyframes বিধিটি ইন্টারনেট এক্সপ্লোরার 9 এবং পূর্ববর্তী সংস্করণগুলিতে সমর্থিত নয়।

কাজের উদাহরণ

div {
  width: 100px;
  height: 100px;
  background: red;
  position :relative;
  -webkit-animation: mymove 3ss forwards; /* Safari 4.0 - 8.0 */
  animation: bubble 3s forwards;
  /* animation-name: bubble; 
  animation-duration: 3s;
  animation-fill-mode: forwards; */
}

/* Safari */
@-webkit-keyframes bubble  {
  0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}

/* Standard syntax */
@keyframes bubble  {
   0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}

<h1>The keyframes </h1>
<div></div>