কম্যান্ড @keyframes

কমান্ড @keyframes অ্যানিমেশনের কীফ্রেম নির্ধারণ করে। একটি কীফ্রেম আমাদের CSS এলিমেন্টের বিভিন্ন বৈশিষ্ট্যকে উপস্থাপন করে, উদাহরণস্বরূপ, অবস্থান, আকার, রঙ ইত্যাদি, যা নির্দিষ্ট সময়ে এলিমেন্টে প্রয়োগ করা হয়।

সিনট্যাক্স

css@keyframes অ্যানিমেশনের_নাম {
  কীফ্রেম
}

উদাহরণ

কীফ্রেম নির্ধারণ করা হচ্ছে:

html<div id="elem"></div>

css@keyframes anim {
  from {
    margin-left: 0px;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  animation: anim 3s infinite;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

উদাহরণ

এবার আসুন আমাদের বর্গক্ষেত্রটিকে অ্যানিমেশনের মাধ্যমে উপর থেকে নীচে সরিয়ে নিয়ে আসি:

html<div id="elem"></div>

css@keyframes anim {
  from {
    margin-top: 0%;
  }
  to {
    margin-top: 10%;
  }
}

#elem {
  animation: anim 2s infinite;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

উদাহরণ

আসুন শতাংশে কীফ্রেম নির্ধারণ করে অ্যানিমেশনের মাধ্যমে আমাদের আকৃতির প্রস্থ বাড়াই:

html<div id="elem"></div>

css@keyframes anim {
  from {
    width: 10%;
  }
  to {
    width: 40%;
  }
}

#elem {
  animation: anim 2s infinite;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

উদাহরণ

এবার আসুন আমাদের আকৃতির পটভূমির রঙ পরিবর্তন করি:

html<div id="elem"></div>

css@keyframes anim {
  from {
    background-color: #467CBC;
  }
  to {
    background-color: #C2DDFD;
  }
}

#elem {
  animation: anim 2s infinite;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

আরও দেখুন