CSS অ্যানিমেশনের জন্য `@keyframes` রুল ব্যবহার করে ইন্টারমিডিয়েট অ্যানিমেশন স্টেপ সংজ্ঞায়িত করা হয়।
উদাহরণ: কীফ্রেম ডিফাইন
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
div { width: 100px; height: 100px; background: red; position: relative; animation: colorChange 5s infinite; }
@keyframes colorChange {
from { background: red; left: 0px; }
to { background: rgb(32, 229, 255); left: 300px; }
}
</style>
</head>
<body>
<h1>CSS-এ কীফ্রেম ডিফাইন করা</h1>
<div></div>
<h2>উপরোক্ত বর্গটি সময়ের সাথে রঙ ও পজিশন পরিবর্তন করবে</h2>
</body>
</html>
কোড ব্যাখ্যা
- @keyframes colorChange: অ্যানিমেশন নাম `colorChange`।
- from / to: ০% এবং ১০০% স্টেট। `0% { ... } 50% { ... } 100% { ... }` দিয়ে মাল্টিপল স্টেপও করা যায়।
- animation: colorChange 5s infinite: ৫ সেকেন্ড ডিউরেশন, অসীম লুপ।
- position: relative + left: লেআউট ফ্লোতে রেখে পজিশন পরিবর্তন।
অ্যানিমেশন প্রোপার্টি
`animation-name, duration, timing-function, delay, iteration-count, direction, fill-mode, play-state` — শর্টহ্যান্ড: `animation: name 5s ease-in-out 0s infinite alternate both running;`
