সিএসএস 3 এর রূপান্তর এবং অ্যানিমেশনগুলি সহজকরণকে সমর্থন করে, আনুষ্ঠানিকভাবে একটি "টাইমিং ফাংশন" নামে পরিচিত called সাধারণ বেশী ease-in, ease-out, ease-in-out, ease, এবং linear, অথবা আপনি আপনার নিজের ব্যবহার নির্দিষ্ট করতে পারেন cubic-bezier()।
ease-in অ্যানিমেশনটি আস্তে আস্তে শুরু করবে এবং পুরো গতিতে শেষ করবে।ease-out পূর্ণ গতিতে অ্যানিমেশনটি শুরু করবে, তারপরে ধীরে ধীরে শেষ করবে।ease-in-out ধীরে ধীরে শুরু হবে, অ্যানিমেশনের মাঝামাঝি দ্রুত হবে, তারপরে ধীরে ধীরে শেষ হবে।easeভালো হয় ease-in-outব্যতীত এটা সামান্য দ্রুত তুলনায় এটি শেষ হয় শুরু।linear কোন শিথিল ব্যবহার করে।- অবশেষে, এখানে
cubic-bezier সিনট্যাক্সের দুর্দান্ত বিবরণ দেওয়া হল , তবে আপনি যদি কিছু খুব সুনির্দিষ্ট প্রভাব না চান তবে এটি সাধারণত প্রয়োজন হয় না।
মূলত, আউট আউট করা হ'ল ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে গতি বৃদ্ধি করা এবং লিনিয়ার কোনওটিই হয় না। আপনি MDN এর জন্য ডকুমেন্টেশনেtiming-function আরও বিশদ সংস্থানগুলি পেতে পারেন ।
এবং আপনি যদি পূর্বোক্ত সুনির্দিষ্ট প্রভাবগুলি দেখতে চান তবে আশ্চর্যজনক লেআ ভারো'র কিউবিক- বেজিয়ার.কম আপনার জন্য রয়েছে! এটি গ্রাফিকভাবে বিভিন্ন সময় কার্যকারিতা তুলনা করার জন্য দরকারী।
আরেকটি, সময়জ্ঞান ফাংশন মত কাজ করে , কিন্তু শুধুমাত্র রূপান্তরটি এর শুরুতে এবং তার শেষ মধ্যে ধাপের একটি নির্দিষ্ট নম্বর সম্পাদন করে। সিএসএস 3 অ্যানিমেশনগুলিতে রূপান্তরের পরিবর্তে আমার পক্ষে সবচেয়ে বেশি কার্যকর; একটি ভাল উদাহরণ বিন্দু সহ সূচক লোড হয়। Ditionতিহ্যগতভাবে, গতির মায়া তৈরি করতে কেউ স্ট্যাটিক ইমেজগুলির একটি সিরিজ (আটটি বিন্দু, প্রতিটি ফ্রেমে দুটি পরিবর্তিত রঙ বলে) ব্যবহার করে। একটি অ্যানিমেশন এবং একটি রূপান্তর সহ, আপনি পৃথক ফ্রেমের মায়া তৈরি করতে গতি ব্যবহার করছেন! কেমন মজা.steps()linearsteps()steps(8)rotate