عمل حركات بواسطة CSS3

تمهيد

في تدوينتين سابقتين تحدثنا عن عمل تحريك لعملية الانتقال بين وضعين transitions مثلا لعمل شرائح متحركة بواسطة css و js أو لعمل حركات استجابة لنقر زر وهذا هو الفرق الرئيسي بينها وبين مقالة اليوم حيث نريد عمل حركات من غير الاستجابة لحدث معين أو timeout (حيث نغير القيم أو نضيف class في css) ...إلخ.

قد ترغب بعمل حركة قرب زر للفت الانتباه له أو عمل وهج حول اللسان الحالي وهكذا

طريقة العمل

أولا اعمل فئة/صنف class في css واختر اسم للحركة التي تريدها عبر animation-name مثلا bounce

.bounce { 
animation-name: bounce;
-webkit-animation-name: bounce;
-moz-animation-name: bounce;
-ms-animation-name: bounce;
-o-animation-name: bounce;
}

ثم حدد كل العوامل التي تتحكم في الحركة مثل

•  animation-duration أي مدة الحركة بالثواني
• iteration-count أي عدد المرات مثلا 1 أو 2 أو infinite أي لا نهائي
• animation-direction أي اتجاه الحركة ويكون عادي normal أو متناوب alternate أي من البداية للنهاية ثم بالعكس وهكذا
• animation-timing-function أي دالة الزمن مثل linear, eaze, eaze-in-out, cubic-bezier

وطبعا كل ماسبق بحاجة إلى سابقة خاصة بالمتصفح مثل "-moz" و "-webkit"

إليك هذا المثال المتكامل

.bounce { 
 -webkit-animation-name: bounce;
 -moz-animation-name: bounce;
 -webkit-animation-duration: 0.5s;
 -moz-animation-duration: 0.5s;
 -webkit-animation-iteration-count: infinite;
 -moz-animation-iteration-count: infinite;
 -webkit-animation-direction: alternate;
 -moz-animation-direction: alternate;
 -webkit-animation-timing-function: eaze-in-out;
 -moz-animation-timing-function: eaze-in-out;
}

بقي علينا أن نحدد ماذا يتم في الحركة من البداية للنهاية مثلا

 @-webkit-keyframes bounce {
  from { left: 0px; }
  to { left: 100px; }
 }

ويمكننا أن نحدد ماذا يجري في كل جزء من الحركة كنسبة مؤوية وليس البداية والنهاية فقط

@-moz-keyframes round {
 0% { left:0; top:0;background:red;}
 25% { left:100px; top:0;background:yellow;}
 50% { left:100px; top:100px;background:green;}
 75% { left:0; top:100px;background:blue;}
 100% { left:0; top:0;background:red;}
}
@-webkit-keyframes round {
 0% { left:0; top:0;background:red;}
 25% { left:100px; top:0;background:yellow;}
 50% { left:100px; top:100px;background:green;}
 75% { left:0; top:100px;background:blue;}
 100% { left:0; top:0;background:red;}
}

أمثلة حية

إليك عدد من الأمثلة الحية

• كرة ترتد بين الجانبين
• أسهم تتحرك تحت صنوق نص
• كرة تدور بين الزوايا الأربعة

هكذا