شرح خاصية Animation Css3

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

ما هي خاصية animation ؟

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

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

كيف أستعمل animation؟

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

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

إعدادات الحركة

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

ملحوظة: يتم استبدال "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

‏‎Bixelio‎‏