شرح صفوف ومحتوى الفقرة
تستخدم خاصية animation-direction مع animation في لغة CSS لتحدد اتجاه الحركة بحالته الطبيعية أو عكسي.
قيم خاصية animation-direction في لغة CSS:
- normal وهي قيمة animation الافتراضية animation وهي تحريكه بوضعه الطبيعي.
- reverse وهي تعطي عكس القيمة الافتراضية أي انها تقوم بعكس اتجاه animation وتجعله عكس اتجاهه الطبيعي.
- alternate يتحرك animation بوضعة الطبيعي في البداية ثم يتحرك للخلف بعدها.
- alternate-reverse يتحرك animation لاتجاهه الطبيعي في البداية ثم يتحرك عكس الاتجاه الطبيعي.
CSS animation direction reverse
تحريك العنصر عكس اتجاهه الطبيعي مع animation-direction-reverse في لغة CSS.
HTML
div
{
width: 100px;
height: 100px;
position: relative;
background-color: blue;
animation-name: move;
animation-duration: 4s;
animation-iteration-count:infinite;
animation-direction: reverse;
}CSS animation direction alternate
يتحرك animation بوضعة الطبيعي في البداية ثم يتحرك عكسي بعدها مع animation-direction والقيمة alternate.
HTML
div
{
width: 100px;
height: 100px;
position: relative;
background-color: blue;
animation-name: move;
animation-duration: 4s;
animation-iteration-count:infinite;
animation-direction: alternate;
}CSS animation direction alternate reverse
يتحرك animation لاتجاهه الطبيعي في البداية ثم يتحرك عكس الاتجاه الطبيعي مع CSS animation-direction والقيمة alternate reverse.
HTML
div
{
width: 100px;
height: 100px;
position: relative;
background-color: blue;
animation-name: move;
animation-duration: 4s;
animation-iteration-count:infinite;
animation-direction: alternate-reverse;
}