@keyframes
animation-name:
animation-duration: কতসময় চলবে
animation-delay: একটি অ্যানিমেশন কতক্ষণ পরে শুরু হবে
animation-iteration-count:[2, infinite] কতবার অ্যানিমেশন হবে
animation-direction:{normal,reverse,alternate,alternate-reverse} কোন দিক থেকে শুরু হবে.
animation-timing-function:[ease,linear,ease-in,ease-out,ease-in-out] অ্যানিমেশন এর গতি কেমন হবে .
animation-fill-mode:[none,forwards,backwards,both]-সাধারণ অ্যানিমেশন শেষ হলে। এলিমেন্ট noraml স্টাইল পায়। তাই এর দ্বারা এনিমেশন শেষ হলে অ্যানিমেশন এর design থাকবে কিনা ডিফাইন করা যাবে।মানে শেষের , শুরুর key পাবে

Learn

@keyframes name { from {background-color: red;} to {background-color: yellow;} }

animation-timeline:scroll(); [x,y]

animation-timeline:view(); [(10px),(10px, 10px)]

animation-range-start:10px;[10px,cover,contain]

animation-range-end:10px ;[10px,cover,contain]

short-hand:- animation-range:normal,10px, cover contain, entry, exit,entry-crossing,exit-crossing;

.element{
                    interpolate-size: allow-keywords;
                  }