شرح صفوف ومحتوى الفقرة
تستخدم خاصية animation-fill-mode مع animation في لغة CSS للتحكم في وضع العنصر بعد الحركة يقف علي style الجديد أم انه يرجع إلي الوضع القديم.
قيم خاصية animation-fill-mode في لغة CSS:
- none : هي القيمة الافتراضية وهو أن يرجع العنصر إلي وضعة الطبيعي بعد animation.
- forwards : يأخذ العنصر قيم وشكل animation في لحظة انتهائه.
- backwards يأخذ العنصر قيم وشكل ال animation في لحظة بدايته.
CSS animation fill mode forwards
يأخذ العنصر قيم وشكل animation في لحظة انتهائه مع الخاصية animation-fill-mode والقيمة forwards.
HTML
div
{
width: 100px;
height: 100px;
background-color: blue;
animation-name: move;
animation-duration: 4s;
animation-fill-mode: forwards;
}CSS animation fill mode backwards
يأخذ العنصر قيم وشكل ال animation في لحظة بدايته مع الخاصية animation-fill-mode والقيمة backwards.
HTML
div
{
width: 100px;
height: 100px;
background-color: blue;
animation-name: move;
animation-duration: 4s;
animation-fill-mode: backwards;
}