@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;
}

Результат:

තවද බලන්න