আসল টাইমলাইন, একটা visual cubic-bezier এডিটর, আর scrubbable playback দিয়ে multi-stop @keyframes অ্যানিমেশন বানান।
CSS পাঠ দেখুনএকটা stop ক্লিক করে এডিট করুন। যেকোনো stop (ফিক্সড 0% আর 100% বাদে) টেনে যেকোনো জায়গায় নিন। "+" সবচেয়ে বড় গ্যাপে একটা নতুন stop যোগ করে।
শুধু যে প্রপার্টিগুলো stop-এর মধ্যে সত্যিই বদলায় সেগুলোই তৈরি হওয়া CSS-এ যায় — কোনো ভ্যালু সব জায়গায় একই রাখলে সেটা বাদ পড়ে যায়, শুধু শুধু অ্যানিমেট হয় না।
Transform
Box shadow
0%–100% একবার সম্পূর্ণ ঘুরতে কত সময় লাগে।
অ্যানিমেশন প্রয়োগ হওয়ার পর শুরু হতে কতক্ষণ অপেক্ষা করে। delay চলাকালীন এলিমেন্ট তার backwards fill state দেখায় (অথবা কিছুই না, fill-mode-এ backwards না থাকলে)।
অ্যানিমেশন কতবার রিপিট হয়। spinner-এর মতো loop-এর জন্য infinite common; এককালীন entrance-এর জন্য একটা finite সংখ্যা common।
alternate প্রতি অন্য পাসে দিক উল্টে দেয় (তাই প্রতি loop-এর শেষে 0%-এ snap back করে না) — reverse প্রতিটা পাস উল্টো চালায়; normal কখনোই না।
অ্যানিমেশন আসলে না চলার সময় এলিমেন্ট দেখতে কেমন লাগে: forwards শেষ হওয়ার পরেও শেষ keyframe-এর ভ্যালু রাখে, backwards delay চলাকালীন প্রথম keyframe-এর ভ্যালু প্রয়োগ করে, both দুটোই করে, none এলিমেন্টের নিজের CSS-এ ফিরে যায়।
প্রতিটা পাসের ভেতরের speed curve নিয়ন্ত্রণ করে — নিচের দুটো হ্যান্ডেল টানুন, বা একটা প্রিসেট বেছে নিন। বলটা আসলেই আপনার সেট করা curve অনুযায়ী eases করে; এটা স্থির কোনো ছবি নয়।
cubic-bezier(0.42, 0, 0.58, 1)
নির্বাচিত লেয়ারে প্রয়োগ হয়, তার বর্তমান stop বদলে দিয়ে — পরে সম্পূর্ণ এডিটযোগ্য।
.box-1-1 {
animation: box-1-1 1500ms cubic-bezier(0.42, 0, 0.58, 1) 0ms infinite alternate none;
}
@keyframes box-1-1 {
0% {
transform: translate(0px, 0px);
}
100% {
transform: translate(200px, 0px);
}
}