انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #5 من درس: المؤثرات الحركية في لغة CSS

Try CSS animation جرب animation في لغة CSS

سوف تتعلم في هذا الدرس المؤثرات الحركية في لغة CSS وهي السماح للغة CSS بعمل مؤثرات حركية دون الحاجه إلي لغة JavaScript.
1 صفوف تعليمية
لغة CSS
4,927 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

في هذا المثال سوف يتحرك div من اليسار من القيمة 0 مع خاصية margin-left ألي 150px جهة اليمين.

CSS animation

تم تحديد أسم animation بداخل عنصر div في لغة CSS

جرّب بنفسك

CSS animation

تم تحديد أسم animation بداخل عنصر div في لغة CSS

HTML 
div
{
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-name: move;
  animation-duration: 4s;
}

@keyframes move
{
  from {margin-left: 0;}
  to {margin-left: 150px;}
}
جرّب بنفسك

CSS animation color

تغيير اللون من الأزرق إلي الأزرق السماوي عن طريق CSS animation.

جرّب بنفسك

جميع فقرات هذا الدرس (المؤثرات الحركية في لغة CSS)