সিএসএস অ্যানিমেশন সম্পত্তি অ্যানিমেট করার পরে থাকে

Question 1

আমি সিএসএস অ্যানিমেশন সম্পত্তি শেষ করার পরে থাকার জন্য চেষ্টা করছি, এটি কি সম্ভব?

এটিই আমি অর্জন করার চেষ্টা করছি ...

ব্যবহারকারী পৃষ্ঠাটিতে অবতরণ করার সময় উপাদানটি লুকানো উচিত, 3 সেকেন্ড (বা যাই হোক না কেন) পরে, এটি বিবর্ণ হওয়া উচিত এবং একবার অ্যানিমেশনটি শেষ হয়ে গেলে এটি সেখানেই থাকা উচিত।

এখানে একটি বেহাল চেষ্টা ... http://jsfiddle.net/GZx6F/

সংরক্ষণের জন্য কোডটি এখানে ...

<h2>Test</h2>

<style>
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.9;
    }
}

h2 {
    animation: fadeIn 1s ease-in-out 3s;
}
</style>

আমি jQuery দিয়ে এটি কিভাবে জানি জানি .. এটি এমন হবে ...

<h2>test</h2>

<script>
  $(document).ready(function(){
    $('h2').hide().delay(3000).fadeIn(3000)
  });
</script>

Question 2

আমি মনে করি আপনি animation-fill-modeCSS3 সম্পত্তি খুঁজছেন

https://developer.mozilla.org/en/CSS/animation-fill-mode

অ্যানিমেশন-ফিল-মোড সিএসএস বৈশিষ্ট্য নির্ধারণ করে যে এটি কার্যকর করার আগে এবং পরে কোনও সিএসএস অ্যানিমেশন কীভাবে তার টার্গেটে শৈলী প্রয়োগ করা উচিত।

আপনার উদ্দেশ্যে কেবল সেট করার চেষ্টা করুন

h2 {
  animation: fadeIn 1s ease-in-out 3s;
  animation-fill-mode: forwards;  
}

ফরোয়ার্ডের মান নির্ধারণ «লক্ষ্য কার্যকর করার সময় সম্মুখীন হওয়া শেষ কীফ্রেমের দ্বারা নির্ধারিত গণিত মানগুলি বজায় রাখে»

Question 3

ছাড়াও উত্তর এর @Fabrizio Calderan , এটা জানা যে আপনি এমনকি আবেদন করতে পারেন হয়েছে animation-fill-modeসম্পত্তি forwardsথেকে সরাসরি animation। সুতরাং নিম্নলিখিতগুলিও কাজ করা উচিত:

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.9;
  }
}

h2 {
  opacity: 0;
  animation: fadeIn 1s ease-in-out 3s forwards;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h2>Test</h2>

স্নিপেট প্রসারিত করুন

Question 4

অ্যানিমেশনটি কীভাবে কার্যকর করা যায় এবং এনিমেশনটি যেমন হয় তেমন থাকার জন্য:

// Beggin

#box {
  /* Give it a width, a height and a background so can see it  */
  width: 200px;
  height: 200px;
  /* Unimportant styling */
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4) inset;
  border-radius: 7px;
  background: linear-gradient(to bottom, #fff 30%, #fcfcfc 40%, #f8f8f8 50%, #f0f0f0 100%);
  
  /* Starts here: */
  opacity: 0;
  animation: yourName 2800ms ease-in-out 0s forwards;
}

@keyframes yourName {
  0% /* (from) */ {
    opacity: 0;
  }
  100% /* (to) */ {
    opacity: 1;
  }
}

<div id="box"></div>

স্নিপেট প্রসারিত করুন

Question 5

আমারও তেমন কিছু ঘটেছিল। আমি অবস্থান যুক্ত করেছি: যে উপাদানটি অ্যানিমেট ছিল এবং তার জন্য এটি আমার জন্য স্থির করে তুলনামূলক।