رسوم متحركة CSS3 (Animations)

يسمح لك نظام تحريك CSS3 بإنشاء تحريكات الفريمات.

إنشاء تحريك CSS3

في الفصل السابق، تعرفت على كيفية تنفيذ تحريك بسيط، مثل تحويل الخاصية من قيمة إلى أخرى باستخدام وظيفة التحريك CSS3. ولكن، لا يمكن التحكم في كيفية تحريك CSS3 في الزمن تقريبًا.

يذهب تحريك CSS3 إلى أبعد من التحريك القائم على الفريمات، مما يسمح لك بتسمية تغييرات CSS الخاصية مع مرور الوقت ك مجموعة من الفريمات، مثل التحريك Flash.

إنشاء تحريك CSS عملية من خطوتين، كما هو موضح في المثال التالي:

• الخطوة الأولى لبناء تحريك CSS هي تعريف الفريمات المختلفة، واستخدام الفريمات لتسمية التحريك.

• الخطوة الثانية هي استخدام خاصية animation-name لتسمية الفريمات، وإضافة animation-duration وأي خيارات إضافيةخصائص الرسوم المتحركةلتحديد سلوك التحريك.

لكن، ليس من الضروري تعريف قواعد الفريمات قبل الاستدلال أو التطبيق على قواعد الفريمات. مثال التالي سيوضح لك كيفية استخدام وظائف التحريك CSS3 لـ<div>الشاشة من موقف إلى موقف آخر.

.box {
　　　　width: 50px;
　　　　height: 50px;
　　　　background: red;
　　　　position: relative;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animation-name:　moveit;
　　　　-webkit-animation-duration: 2s;
　　　　
　　　　animation-name:　moveit;
　　　　animation-duration: 2s;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes moveit {
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

يجب عليك تحديد على الأقل اثنين من الخصائص animation-name و animation-duration (أكبر من 0) لتشغيل الرسم المتحرك. ولكن يمكن أيضًا تحديد جميع الخصائص الأخرىخصائص الرسوم المتحركةاختيارية لأن قيمتها الافتراضية لن تمنع حدوث الرسم المتحرك.

تعريف النقاط المفتاحية

تستخدم النقاط المفتاحية لتعيين قيم خصائص الرسم المتحرك في مراحل مختلفة من الرسم المتحرك. النقاط المفتاحية هي استخدامقواعد CSSمحددة من قبل @-keyframes. يجب أن تبدأ اختصار النقاط المفتاحية لقواعد النقاط المفتاحية بالنسبة المئوية (%) أو الكلمة من (تساوي 0٪) إلى إلى (تساوي 100٪). يتم استخدام المختصر لتحديد موقع بناء نقاط المفتاح في عملية الرسم المتحرك.

النسبة المئوية تمثل نسبة زمن الرسم المتحرك، 0٪ تمثل بداية الرسم المتحرك، 100٪ تمثل نهاية الرسم المتحرك، 50٪ تمثل منتصف الرسم المتحرك، إلخ. هذا يعني أن نقطة المفتاح 50٪ في رسم متحرك مدته 2 ثانية ستكون في نقطة 1 ثانية من الرسم المتحرك.

.box {
　　　　width: 50px;
　　　　height: 50px;
　　　　margin: 100px;
　　　　background: red;
　　　　position: relative;
　　　　left: 0;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animation-name: shakeit;
　　　　-webkit-animation-duration: 2s;
　　　　
　　　　animation-name: shakeit;
　　　　animation-duration: 2s;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes shakeit {
　　　　12.5% {left: -50px;}
　　　　25% {left: 50px;}
　　　　37.5% {left: -25px;}
　　　　50% {left: 25px;}
　　　　62.5% {left: -10px;}
　　　　75% {left: 10px;}
}
　
@keyframes shakeit {
　　　　12.5% {left: -50px;}
　　　　25% {left: 50px;}
　　　　37.5% {left: -25px;}
　　　　50% {left: 25px;}
　　　　62.5% {left: -10px;}
　　　　75% {left: 10px;}
}

خصائص مختصرة للرسوم المتحركة

عند إنشاء رسم متحرك يجب مراعاة العديد من الخصائص. ولكن يمكن أيضًا تحديد جميع خصائص الرسم المتحرك في خصائص واحدة لتقليل طول الكود.

خصائص animation هي خصائص مختصرة تستخدم لتعيين جميع الخصائص الفردية المدرجة بالترتيب المحدد مسبقًاخصائص الرسوم المتحركة。على سبيل المثال:

.box {
　　　　width: 50px;
　　　　height: 50px;
　　　　background: red;
　　　　position: relative;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animation: repeatit 2s linear 0s infinite alternate;
　　　　
　　　　animation: repeatit 2s linear 0s infinite alternate;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes　repeatit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes　repeatit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

خصائص التحرك CSS3

يخفي الجدول أدناه تلخيصًا مختصرًا لجميع خصائص التحرك.