animation ගුණය

animation ගුණය යනු ඇනිමේෂන් සඳහා වූ කෙටි ආකාරයේ ගුණයකි, එයට සියලු ඇනිමේෂන් ගුණ එකවර අර්ථ දැක්විය හැකිය: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

අගයන් අනුපිළිවෙලට වැදගත් නැත, ඇනිමේෂනය ක්‍රියාත්මක වන කාලය animation-duration අනිවාර්යයෙන්ම ප්‍රමාදයට පෙර animation-delay ස්ථානගත කළ යුතුය. අනිවාර්ය ගුණ වන්නේ කෙලෙසද animation-name සහ animation-duration.

ගුණයට none අගය ද ලබා දිය හැකිය, එය ඇනිමේෂනය සම්පූර්ණයෙන්ම අක්‍රිය කරයි. මෙම අගය පෙරනිමි අගය වේ.

වාග් රීතිය

cssතෝරන්නා {
  animation: අගයන්;
}

උදාහරණය

මෙම උදාහරණයේ දී, ඇනිමේෂනයට පෙර ප්‍රමාදයක් 3 තත්පර (සෑම නව වාරයකටම පෙර), ඉන්පසු ඇනිමේෂනය ක්‍රියාත්මක වනු ඇත 6 තත්පරයක් ඇතුළත:

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

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

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

Результат:

උදාහරණය . හැකි ගැටළු

කෙටි ආකාරයෙන් ලියා ඇති ඇනිමේෂනය, එහි නම හේතුවෙන් ක්‍රියා නොකරනු ඇත. පහත ඇනිමේෂනය බලමු:

css@keyframes reverse {
  from {
    left: 0;
  }
  to {
    left: 300px;
  }
}

සැලකිල්ලට ගන්න, මම ඇනිමේෂන නම ලෙස reverse භාවිතා කරමි. පළමු බැල්මෙන්, සියල්ල හොඳය, නමුත් ඇනිමේෂනය ක්‍රියා නොකරයි, මන්ද reverse - වලංගු animation-direction ගුණය සඳහා යතුරු වචනයකි.

කෙටි ආකාරයෙන් භාවිතා කරන විට ඇනිමේෂනය ක්‍රියා නොකරනු ඇත නමෙහි වෙනත් යතුරු වචන ඇතුළත් වීමෙන්. නමුත් "සම්පූර්ණ" ආකාරයෙන් විස්තර කිරීමේදී සියල්ල හොඳින් ක්‍රියා කරයි.

animation-direction ගුණයේ යතුරු වචන-අගයන්ට, ඇනිමේෂනය කඩා දැමිය හැකි, සුමට කාර්යයන් සමඟ බැඳී ඇති යතුරු වචන, එමෙන්ම infinite, alternate, running, paused සහ යනාදී වචන ද අයත් වේ.

මෙයද බලන්න