الحركة من اليسار إلى اليمين في CSS: حل عالمي

يواجه العديد من مطوري الويب التحدي المتمثل في تحريك عناصر DIV على طول محور أفقي، مرتبط على حواف الحاوية الخاصة بهم. تمثل هذه المهمة تعقيدات، حيث يمكن أن تؤدي القيم الثابتة إلى اختفاء العنصر للحظات.

لمعالجة هذه المشكلة، يمكن استخدام رسوم متحركة CSS عامة لتحريك DIV بسلاسة من اليسار إلى اليمين. ومع ذلك، فإن استخدام الخصائص اليسرى عند 0% و100% قد يسبب وميضًا بسبب خروج العنصر تمامًا من الشاشة.

للتغلب على هذا، يوصى باستخدام مجموعة من خصائص التحويل واليسار أو اليمين. تحافظ هذه الطريقة على العنصر الموجود على الشاشة مع توفير الحركة المطلوبة.

على سبيل المثال، تحقق كود CSS التالي هذا التأثير:

@keyframes destraSinistra {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
    transform: translateX(-100%);
  }
}

#div1 {
  position: absolute;
  border: solid 1px lightgray;
  width: 100px;
  height: 30px;
  background-color: lightgreen;
  animation: destraSinistra 1s linear infinite alternate;
}

تضمن هذه التقنية أن ينتقل DIV بسلاسة بين الحواف اليسرى واليمنى لحاويته، مما يوفر حلاً متعدد الاستخدامات لأي DIV مع تحديد موضع مطلق.