نتائج البحث

‎.animate( properties [, duration ] [, easing ] [, complete ] )‎ القيمة المعادة كائن jQuery. الوصف يُستخدَم التّابع ‎.animate()‎ في تنفيذ تحريك (animation) مُخصَّص لمجموعة من خاصيّات CSS. ‎.animate( properties [, duration ] [, easing ] [, complete ] )‎ أضيفت في الإصدار 1.0. properties كائن مُجرَّد (PlainObject)، ويُمثِّل خاصيّات CSS والقيم التي سيتجه التحريك باتجاهها. duration عدد أو سلسلة نصيّة، وتُمثِّل القيمة التي ستُحدِّد فترة تشغيل التحريك. القيمة الافتراضيّة: 400. easing سلسلة نصيّة، وتُمثِّل دالة الحركة السّلسة (easing ...

الخاصية animation-duration في CSS تُحدِّد الزمن اللازم لإكمال دورة كاملة من الحركة. بطاقة الخاصية القيمة الابتدائية 0s تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. من الشائع استخدام الخاصية المختصرة animation لضبط جميع خاصيات الحركات بآنٍ واحد. /* حركة واحدة */ animation-duration: 6s; animation-duration: 120ms; /* عدِّة حركات */ animation-duration: 1.64s, 15.22s; animation-duration: 10s, 35s, 230ms; /* القيم العامة */ animation-name: initial animation-name: inherit animation-name: unset دعم المتصفحات الميزة Chrome Firefox Internet Explorer Opera Safari الدعم الأساسي 4.0 (مع السابقة -webkit-) 43.0 5.0 ...

الخاصية animation-name في CSS تستعمل لتحديد أسماء الحركات التي ستُطبَّق على العنصر، وكل اسم يجب أن يُشير إلى قاعدة ‎@keyframes التي تُعرِّف قيم الخاصيات اللازمة للحركة. بطاقة الخاصية القيمة الابتدائية none تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. من الشائع استخدام الخاصية المختصرة animation لضبط جميع خاصيات الحركات بآنٍ واحد. /* حركة واحدة */ animation-name: none; animation-name: test_05; animation-name: -specific; animation-name: sliding-vertically; /* عدِّة حركات */ animation-name: test1, animation4; animation-name: none, -moz-specific, sliding; /* القيم العامة */ animation-name: initial animation-name: inherit animation-name: unset دعم ...

الخاصية animation-delay في CSS تُحدِّد متى ستبدأ الحركة، ويمكنك تأخير بدء الحركة فترةً من الزمن، أو البدء مباشرةً، أو البدء مباشرةً لكن مع تجاوز جزء من دورة الحركة. بطاقة الخاصية القيمة الابتدائية 0s تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. من الشائع استخدام الخاصية المختصرة animation لضبط جميع خاصيات الحركات بآنٍ واحد. /* قيمة واحدة */ animation-delay: 3s; animation-delay: 0s; animation-delay: -1500ms; /* عدِّة قيم */ animation-delay: 2.1s, 480ms; /* القيم العامة */ animation-delay: inherit; animation-delay: initial; animation-delay: unset; دعم المتصفحات الميزة ...

الخاصية animation-direction في CSS تُحدِّد إذا كان يجب تشغيل الحركة إلى الأمام (forwards) أو إلى الخلف (backwards) أو التبديل بينهما. بطاقة الخاصية القيمة الابتدائية normal تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. من الشائع استخدام الخاصية المختصرة animation لضبط جميع خاصيات الحركات بآنٍ واحد. /* قيمة واحدة */ animation-direction: normal; animation-direction: reverse; animation-direction: alternate; animation-direction: alternate-reverse; /* عدِّة قيم */ animation-direction: normal, reverse; animation-direction: alternate, reverse, normal; /* القيم العامة */ animation-direction: inherit; animation-direction: initial; animation-direction: unset; دعم المتصفحات الميزة Chrome Firefox Internet Explorer ...

الخاصية animation-fill-mode في CSS تُحدِّد كيف يجب أن تُطبِّق حركات CSS قيمَ الخاصيات إلى العنصر قبل وبعد تنفيذ الحركة. بطاقة الخاصية القيمة الابتدائية none تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. من الشائع استخدام الخاصية المختصرة animation لضبط جميع خاصيات الحركات بآنٍ واحد. /* قيمة واحدة */ animation-fill-mode: none; animation-fill-mode: forwards; animation-fill-mode: backwards; animation-fill-mode: both; /* عدِّة قيم */ animation-fill-mode: none, backwards; animation-fill-mode: both, forwards, none; /* القيم العامة */ animation-fill-mode: inherit; animation-fill-mode: initial; animation-fill-mode: unset; أمثلة يمكنك أن تلاحظ أثر الخاصية animation-fill-mode في ...

الخاصية animation-timing-function في CSS تستعمل لوصف كيف ستتأثر القيم الوسطية لخاصيات CSS بالحركة، أي أنها تسمح لك بتحديد ما هو منحني التسارع (acceleration curve) للحركة خلال دورة واحدة. بطاقة الخاصية القيمة الابتدائية ease تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. من الشائع استخدام الخاصية المختصرة animation لضبط جميع خاصيات الحركات بآنٍ واحد. /* كلمات محجوزة */ animation-timing-function: ease; animation-timing-function: ease-in; animation-timing-function: ease-out; animation-timing-function: ease-in-out; animation-timing-function: linear; animation-timing-function: step-start; animation-timing-function: step-end; /* دوال */ animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-timing-function: steps(4, end); animation-timing-function: frames(10); /* عدِّة ...

الخاصية animation-play-state في CSS تُحدِّد إذا كانت الحركة تعمل أو متوقفة مؤقتًا، ويمكن الحصول على قيمة هذه الخاصية عبر JavaScript لمعرفة حالة الحركة، ويمكن أيضًا استعمال JavaScript لضبط قيمتها لتوقيف الحركة مؤقتًا أو استئنافها. بطاقة الخاصية القيمة الابتدائية running تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. /* قيمة واحدة */ animation-play-state: running; animation-play-state: paused; /* عدِّة قيم */ animation-play-state: paused, running, running; /* القيم العامة */ animation-play-state: inherit; animation-play-state: initial; animation-play-state: unset; استئناف الحركات المتوقفة مؤقتًا سيسمح بإكمالها من مكان توقفها، بدلًا ...

الخاصية animation-iteration-count في CSS تُحدِّد عدد مرات تكرار دورة الحركة حتى توقف الحركة، وإذا حُدِّدت أكثر من قيمة فسيتم استخدام القيمة التي تلي القيمة التي طُبِّقَت سابقًا عند إعادة تشغيل الحركة، إلى أن نعود إلى القيمة الأولى بعد استخدام آخر قيمة. بطاقة الخاصية القيمة الابتدائية 1 تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للتحريك لا القيمة المحسوبة كما حُدِّدَت. من الشائع استخدام الخاصية المختصرة animation لضبط جميع خاصيات الحركات بآنٍ واحد. /* قيمة واحدة */ animation-iteration-count: infinite; animation-iteration-count: 3; animation-iteration-count: 2.3; /* عدِّة ...

الدالة calc()‎ في CSS تسمح بإجراء عمليات حسابية عند تحديد قيم خاصيات CSS، ويمكن استخدامها في أي موضع يُسمَح فيه باستخدام أنواع البيانات <length> و <percentage> و <angle> و <time> و <number> و <integer>. /* property: calc(expression) */ width: calc(100% - 80px); أمثلة يمكن بسهولة ضبط موضع أحد العناصر باستخدام الدالة calc()‎ بتحديد قيمة للهامش، ففي هذا المثال أنشأنا عنصرًا يمتد على طول النافذة، مع فراغ بمقدار 40px على جانبيه: <div class="banner">هذا هو الشعار!</div> شيفرة CSS: .banner { position: absolute; ...