CSS Keyframes এবং অ্যানিমেশন প্রপার্টি ব্যবহার করে একটি সিম্পল লুপিং ব্যাকগ্রাউন্ড কালার অ্যানিমেশন বানানো শিখুন।
এই উদাহরণে HTML <body> এলিমেন্ট টার্গেট করা হয়েছে, কিন্তু যেকোনো এলিমেন্টে প্রয়োগ করা যায়।
অ্যানিমেশন প্ল্যানিং
- ৫টি ব্যাকগ্রাউন্ড কালার
- টোটাল ডুরেশন ১০ সেকেন্ড (প্রতিটি কালার ২ সেকেন্ড)
- লিনিয়ার অ্যানিমেশন কার্ভ (একই স্পিড শুরু থেকে শেষ)
Coolors.co থেকে হারমোনিয়াস কালার প্যালেট:
- Sunset Orange:
#EE6055 - Medium Aquamarine:
#60D394 - Pale Green:
#AAF683 - Mellow Yellow:
#FFD97D - Vivid Tangerine:
#FF9B85
লুপিং CSS অ্যানিমেশন তৈরি
CSS অ্যানিমেশন keyframes ০% থেকে ১০০% পিরসেন্টেজে কাজ করে:
@keyframes backgroundColorPalette {
0% { background: #ee6055; }
25% { background: #60d394; }
50% { background: #aaf683; }
75% { background: #ffd97d; }
100% { background: #ff9b85; }
}body এলিমেন্টে অ্যানিমেশন প্রপার্টিগুলো যোগ করুন:
body {
animation-name: backgroundColorPalette;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-direction: alternate;
}CSS কীভাবে কাজ করে
animation-name: keyframes নাম অ্যাসাইন করেanimation-duration: 10s: টোটাল ১০ সেকেন্ডanimation-iteration-count: infinite: নিরব cesse লুপ (ডিফল্ট ১)animation-direction: alternate: ফরওয়ার্ড তারপর ব্যাকওয়ার্ড—নরম্যাল দিয়ে উগলি জাম্প এড়াতে
গুড টু নো
ডিফল্ট অ্যানিমেশন স্পিড কার্ভ linear। একসপ্রেসিভ কোডের জন্য animation-timing-function: linear; eksplisitly লিখতে পারেন।
