شرح خاصية Animation Css3



عند Css3 خصائص مميزة من إصدار سابق Css2 مثل  Transition  و Transforms و Animation و غيرها الكثير من الخصائص الجديدة.و  في هذه المقالة سأتحذث عن خاصية Animation في css3 و سأقدم شرحا وافياً مع تطبيقات عملية لها وأمثلة حياة لهذه الخاصية.


ما هي خاصية animation ؟



خاصية Animation هي نقل أو تغيير عنصر HTML مثل DIV من ستايل إلي أخر. أو نقله عبر مجموعة من الاستايلات أو الاطارات في فترة زمنية بشكل متسلسل.

و قبل Animation كانت تستعمل لغة JavaScript لتحريك عناصر HTML.


كيف أستعمل animation؟



هناك خطوتين لإنشاء حركة  animationو هي كتالي:

  1. الخطوة الأولى: إعدادات الحركة. بداية الحركة ونهايتها ومدتها ...الخ.
  2. الخطوة الثانية: تحديد الحركة عبر مجموعة من الاستايلات و في فترات مختلفة من زمن.

  • إعدادات الحركة
لإنشاء حركة يجب أن تحدد أولا أسم لحركة و مدتها الخ. ويتم هذا في داخل العنصر مراد عمل حركة عليه بشكل التالي:


ملحوظة: يتم استبدال "NAME-YOUR-ANIMATION" بأسم الذي تريده

  • تحديد الحركة
يتم ضبط الحركة و استايلاتها عبر keyframes@. حدد Css استايل داخل @keyframes و ستتم الحركة بشكل تدريجي من الاستايل Css الحالي إلى لاسايل لأخر. ويتم هذا بشكل التالي:


يمكنك تحديد متى سيحدث التغيير بنسبة المئوية، أو يمكنك استخدام الكلمات "from" و "to" (واللذان يمثلان %0 و %100). وتمثل %0 بداية الحركة، و %100 عند إكتمالها.

وهذا جدول كامل بخصائص animation

الخاصية الوصف
animation-delay تحديد مدة الانتظار قبل بدأ الحركة
animation-direction تحديد اتجاة الحركة كأن تبدأ الحركة من الاطار الاول أو تبدأ بالعكس من الاطار الأخير و الاختيارات المتاحة هى normal و reverse و alternate و alternate-reverse و يمكن استخدام اختيارين أو أكثر معا
animation-duration تحديد مدة الحركة لدورة واحدة
animation-fill-mode تحديد تطبيق الاستايل الاول من الحركة علي العنصر قبل بدأ الحركة أو تطبيق الاستايل الاخير بعد انتهاء الحركة أو كليهما معا أو عدم تطبيق اي منهم عن طريق اختيارات forwards و backwards و both و none
animation-iteration-count عدد مرات تكرار الحركة أو تكون حركة مستمرة (infinite) و الوضع الافتراضي مرة واحدة
animation-play-state عن طريق هذة الخاصية يمكن ايقاف و تشغيل الحركة و أيضا يمكن قرأتها لمعرفة حالة الحركة و الاختيارات هى running و paused
animation-timing-function تحدد كيفية تسلسل الحركة بين الاطارات المختلفة و أيضا داخل الاطار الواحد و يتم تطبيقها عند بداية و نهاية الاطار و الاختيارات المتاحة هى ease و ease-in و ease-out و ease-in-out و linear و (cubic-bezier(n, n, n, n و step-start و step-end و (steps(n
animation-name تحديد اسم أو أسماء الاطارات (keyframes@) المكونة للحركة:

تطبيقات عملي و أمثلة



بكسليو : مستوى جديد للإبداع

في هذا المثال غيرنا لون العنصر ﻟ 5 الوان خلال مدة 5 ثواني مع التكرار.




    #bx {
        color: #eb00ff;
        font-size: 35px;
        animation: colors 5s infinite;
        -webkit-animation: colors 5s infinite;
    }
        
    @keyframes colors {
        0% {color: #eb00ff;}
        25% {color: #baff00;}
        50% {color: #00ceff;}
        75% {color: #ff0;}
        100% {color: #eb00ff;;}
    }
            
    @-webkit-keyframes colors {
        0% {color: #eb00ff;}
        25% {color: #baff00;}
        50% {color: #00ceff;}
        75% {color: #ff0;}
        100% {color: #eb00ff;;}
    }

<div id='bx'>بكسليو : مستوى جديد للإبداع</div>

كما رأيتم في هذا المثال. قمنا بإعداد الحركة داخل العنصر. و الذي هو ف حالتنا Div يحمل bx" ID". ثم قمنا بتحديد الحركة أو الاستايلات عبر keyframes@. و استعملنا نسبة المئوية لتغير الحركة.


See the Pen CSS3 animation text moving by Mohamed Youssouf (@mohamedyoussouf) on CodePen.

لإعادة تشغيل الحركة ضع مؤشر فوق الإطار و أضغط على rerun

و هذا مثال أخر لحركة ﯧ animation. حيث قمنا بتحريك عنصر h1 من يسار ليمين. و استعملنا كلمات to/from بدلاً من نسبة المئوية كما في مثال الأول.

و لحصول على أكبر دعم لمتصفحات.  استعمل البادئات التالية مع الخاصية.


.element {
  -webkit-animation: NAME-YOUR-ANIMATION 5s;
  -moz-animation:    NAME-YOUR-ANIMATION 5s;
  -o-animation:      NAME-YOUR-ANIMATION 5s;
  animation:         NAME-YOUR-ANIMATION 5s;
}

@-webkit-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

و نترككم مع هذه الأمثلة من موقع codepen.io لخاصية animation


See the Pen css animation practice by CsB (@CsB) on CodePen.


See the Pen CSS Animations by Kevin Bourke (@bourkekev) on CodePen.


See the Pen Typing Text ---css3 animation-1 by asjmtz (@asjmtz) on CodePen.

دعم المتصفحات


الخاصية Ie Safari Opera Firefox Chrome
animation 10.0 4.0 -webkit- 15.0 -webkit-
12.1
12.0 -o-
16.0
5.0 -moz-
4.0 -webkit-
@keyframes 10.0 4.0 -webkit- 15.0 -webkit-
12.1
12.0 -o-
16.0
5.0 -moz-
4.0 -webkit-


المصادر 1 / 2

هناك 5 تعليقات:

  1. مشكور اخي على شرحك الرائع بارك الله فيك

    ردحذف
    الردود
    1. شكرا لك على وقتك و أهلا بك كأول معلق على مدونتي المتواضعة :)

      حذف
    2. العفو اخي
      ولي الشرف بذالك بالتوفيق لك :)

      حذف
  2. شرحك وافي
    جزاك الله الجنة

    ردحذف

بكسليو - لمحترفي تصميم و تطوير الويب © 2014

يتم التشغيل بواسطة Blogger.