examples - একটি CSS3 অ্যানিমেশন শেষে চূড়ান্ত রাষ্ট্র বজায় রাখা




css animation examples (2)

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

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

কোড (prefixed সংস্করণ অন্তর্ভুক্ত না):

@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; }
}

আপনি আরো অ্যানিমেশন গুণাবলী ব্যবহার করা হয়, তাহলে shorthand হয়:

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

2s সময়কাল, রৈখিক টাইমিং-ফাংশন, 0.5s বিলম্ব, 1 পুনরাবৃত্তি-গণনা, স্বাভাবিক দিক, ফরোয়ার্ড ফোল মোড


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

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




css-animations