CSS3 Modules

CSS3 animations

آخر تحيين: 21-10-2014

CSS3 Multi-column Layout CSS3 transitions


مع إصدار CSS3 أصبح بإمكاننا الإستغناء عن سكريبتات الفلاش و جافاسكريبت لتنشيط حركة العناصر أثناء المرحلة الإنتقالية من نمط إلى أخر .
لإنشاء سلسلة متحركة لعنصر ما ، نحتاج إلى خاصيتين أساسيتين و هما "@keyframes" التي تحدد شكل أنماط البداية و النهاية و كذلك الأنماط البينية للمرحلتين . ثم خاصية "animation" التي تصف الحركة في حد ذاتها و تندرج منها مجموعة من الخاصيات الداعمة ، سأعرضها عليكم أولا ثم سنتعرف عليها تدريجيا عبر أمثلة .

رقم أول إصدار للمتصفحات التي بدأت تدعم الخاصيات
الخاصية
@keyframes-webkit- 4.016.0
-moz- 5.0
-webkit- 4.0-webkit- 15.0
12.1
-o- 12.0
10.0
animation
animation-delay
animation-direction
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
animation-duration-webkit- 3.0
بالنسبة للأرقام التي تلي المحددات التصديرية "-moz- , -o-, -webkit- " تدل عاى أول إصدار للمتصفح الذي بدأ يأخذ بعين الإعتبار هذه المحددات
بالنسبة للأرقام فوقها تدل على أول إصدار للمتصفح الذي بدأ يدعم الخاصية بدون استعمال المحددات

animation

لإنشاء العنصر الذي سيتم تنشيطه ، نستعمل الخاصية animation و نحدد لها قيمتين على الأقل : إسم العنصر الذي سيتم تنشيطه ، و الوقت الذي سيستغرقه التنشيط :

div {
  animation: mytest 5s;
}

القيمة الأولى "mytest" هي إسم العنصر الذي سيتم تنشيطه ، هي قيمة اعتباطية يمكنكم تسميتها كما شئتم . أما القيمة الثانية "5s" تُحدّد المدة الزمنية التي سيستغرقها التنشيط .
بهذا أصبح العنصر div جاهزا للتنشيط . لتفعيل العملية يجب تمرير إسم العنصر الذي أنشأناه "mytest" للخاصية الثانية @keyframes .

@keyframes mytest {
  /* ... */
}

@keyframes

داخل الخاصية @keyframes نقوم بتحديد شكل النمط الذي سيكون عليه العنصر في زمن ما أثناء التنشيط ، يمكننا تحديد نمط البداية و النهاية و كذلك الأنماط البينية .
لتحديد نمط البداية و النهاية يمكننا استعمال مفتاحي : "from , to " و هي تعني "من ، إلى " :
داخل "from" سنقوم بتحديد أنماط البداية .
داخل "to" نحدد أنماط النهاية .

@keyframes mytest {
    from { 
        background-color: blue;
    }
    to {
        background-color: red;
   }
}

في المثال أسفله ، سنقوم بتنشيط العنصر المسمى "mytest" لمدة 6 ثواني . و سنقوم بتغيير لونه من الأزرق "لون البداية" إلى اللون الأحمر "لون النهاية"

div {
    background-color:blue;
    -webkit-animation: mytest 6s;
    animation: mytest 6s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mytest {
   from { background-color: blue;}
   to { background-color: red; }
}
/* الخاصية الأصلية */
@keyframes mytest {
   from { background-color: blue;}
   to { background-color: red; }
}
مشاهدة النتيجة

يمكننا تطبيق العدد الذي نريده من الأنماط داخل @keyframes . لنرى مثالا آخر .
سنقوم بتحريك وسم العنوان h1 من اليمين إلى اليسار و نقوم بتغيير لونه في الوقت نفسه .

h1 {
    -webkit-animation: mytest 5s;
    animation: mytest 5s;
}
@keyframes mytest {
    from {
      margin-left: 70%;
      color: red;
    }    
    to {
      margin-left: 0%;
      color: green;
    }
}
مشاهدة النتيجة

يمكننا أيضا استعمال مفاتيح النسب المؤية بدل "from ... to" ، و هذا سيساعدنا على تحديد أنماط بينية أخرى للعنصر بالإضافة إلى نمط البداية و النهاية .

@keyframes mytest {
   0% { background-color: blue;}
   25% { background-color: green; }
   50% { background-color: red; }
   75% { background-color: yellow; }
   100% { background-color: orange; }
}
مشاهدة النتيجة

animation الخاصيات المختصرة

لدينا مجموعة من الخاصيات المختصرة الداعمة و التي تسهل علينا التحكم في تنشيط العناصر . لكل واحدة دورها المنوط بها . رأينا منها في الأمثلة السابقة خاصيتين كنا قد استعملناهما كقيم للخاصية animation هما :

  • animation-name: إسم العنصر الذي سيتم تنشيطه ، أطلقنا عليه اعتباطيا إسم "mytest" .
  • animation-duration : الوقت الذي ستستغرقه عملية التنشيط

لاستعمال الخاصيتين يمكننا تغيير الشيفرة السابقة animation: mytest 6s; كالتالي :

div {
   animation-name: mytest;
   animation-duration: 6s;
}

باقي الخاصيات المختصرة أعرضها عليكم ، ثم سندرسها عبر أمثلة :

  • animation-delay : تحدد الوقت الذي يجب انتظاره قبل بدأ التنشيط
  • animation-direction : تحدد ما إذا كان التنشيط سيلعب في الإتجاه المعاكس أو يعود إلى نقطة البداية أو يتم تكراره
  • animation-iteration-count : تحدد عدد المرات التي سيتم فيها تكرار التنشيط
  • animation-play-state : تمكننا من توقيف التنشيط أو تفعيله
  • animation-timing-function : تحدد منحنى السرعة للتنشيط مثلا : يبدأ بسرعة و يختم ببطء
  • animation-fill-mode : تحدد الأنماط التي سيأخذها العنصر عندما لا يكون نشيطا : "عند انتهاء التنشيط أو قبل بدئه"

animation-iteration-count

الخاصية animation-iteration-count تحدد عدد المرات التي سيتم فيها إعادة لعب التنشيط . و نعطيها القيم التالية : number| infinite| initial| inherit

قيم الخاصية animation-iteration-count
القيمةالشرحمثال
numberتحديد عدد المرات التي سيتم فيها إعادة لعب التنشيطمشاهدة النتيجة
infiniteيلعب التنشيط بصفة مستمرة ، دون توقفمشاهدة النتيجة

animation-direction

الخاصية animation-direction تحدد ما إذا كان التنشيط سيلعب في الإتجاه العكسي أو وفق دورات متكررة . و تأخذ القيم التالية :
normal| reverse| alternate| alternate-reverse| initial| inherit

قيم الخاصية animation-direction
القيمةالشرحمثال
normalالقيمة الإفتراضية ، يلعب التنشيط بشكل طبيعيمشاهدة النتيجة
reverseيلعب التنشيط بشكل عكسيمشاهدة النتيجة
alternateيتم تغيير اتجاه التنشيط بعد انتهاء كل دورةمشاهدة النتيجة
alternate-reverseيتم تغيير اتجاه التنشيط بعد انتهاء كل دورة عكس اتجاه alternateمشاهدة النتيجة

animation-timing-function

تحدد الخاصية animation-timing-function منحنى السرعة لتنشيط العنصر ، أي سرعة الإنتقال من نمط لآخر بطريقة سلسة .
يمكننا استعمال منحنى cubic bezier "مكعب بيزيي" ، أو استعمال القيم المعرفة مسبقا :
linear|ease|ease-in|ease-out|cubic-bezier(n,n,n,n)|initial|inherit

قيم الخاصية animation-timing-function
القيمةالشرح
cubic-bezier(n,n,n,n)مكعب بيزيي ، يمكننا تحديد 4 قيم للسرعة . كل قيمة تتراوح بين 0 و 1
linearيحافظ التنشيط على نفس السرعة من البداية إلى نهاية الدورة
هذه القيمة تعادل مكعب بيزيي cubic-bezier(0,0,1,1)
easeالقيمة الإفتراضية : يبدأ التنشيط ببطء ثم يزداد سرعة ثم ينتهي ببطء
هذه القيمة تعادل مكعب بيزيي cubic-bezier(0.25,0.1,0.25,1)
ease-inيبدأ التنشيط ببطء
هذه القيمة تعادل مكعب بيزيي cubic-bezier(0.42,0,1,1)
ease-outينتهي التنشيط ببطء
هذه القيمة تعادل مكعب بيزيي cubic-bezier(0,0,0.58,1)
ease-in-outيبدأ التنشيط ببطء و ينتهي ببطء
هذه القيمة تعادل مكعب بيزيي cubic-bezier(0.42,0,0.58,1)

المثالين أسفله سيعطيان نفس النتيجة
باستعمال القيم المُعرّفة

.box1 { animation-timing-function: linear; }
.box2 { animation-timing-function: ease; }
.box3 { animation-timing-function: ease-in; }
.box4 { animation-timing-function: ease-out; }
.box5 { animation-timing-function: ease-in-out; }

إستعمال مكعب بيزيي

.box1 { animation-timing-function: cubic-bezier(0,0,0.25,1); }
.box2 { animation-timing-function: cubic-bezier(0.25,0.1,0.25,1); }
.box3 { animation-timing-function: cubic-bezier(0.42,0,1,1); }
.box4 { animation-timing-function: cubic-bezier(0,0,0.58,1); }
.box5 { animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
مشاهدة النتيجة

animation-play-state

تُمكّننا الخاصية animation-play-state من توقيف التنشيط أو تفعيله . يمكننا إعطاءها قيمتين :
running : القيمة الإفتراضية ، تقوم بتشغيل التنشيط
paused : تقوم بتوقيف التنشيط

.box {
  -webkit-animation-play-state:paused;
  animation-play-state:paused;
}

animation-delay

تُحدّد الخاصية animation-delay المدة الزمنية التي يجب انتظارها قبل بدء التنشيط

.box {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

خلاصة

ننهي هذا الدرس بمثال يجمع أغلب الخاصيات التي رأيناها

div {
  -webkit-animation-name: moving;
  -webkit-animation-duration: 5s;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-delay: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;

  animation-name: moving;
  animation-duration: 5s;
  animation-timing-function: ease-in;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

يمكننا جمع جميع قيم هذه الخاصيات ، في خاصية animation . و سنحصل على نفس نتيجة الشيفرة أعلى :

div {
  -webkit-animation: moving 5s ease-in 2s infinite alternate;
  animation: moving 5s ease-in 2s infinite alternate;
} 
مشاهدة النتيجة

مثال آخر

.circle {
  -webkit-animation: ball 2s ease-in-out 1s infinite alternate;
  animation: ball 2s ease-in-out 1s infinite alternate;
}

@keyframes ball {
  from { transform: translateX(0) rotate(0);}				
  to { transform: translateX(450px) rotate(4turn);}
}
مشاهدة النتيجة