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

ميزة التحريك في CSS3 تتيح إمكانية إعطاء خصائص CSS الأخرى فترة ظهور سواء كانت بطيئة أو سريعة وتحدد بالثواني، إضافةً إلى مدة لتأخير التحريك والظهور، ما زال دعم خصائص هذه الميزة محدود على المتصفحات التي تعمل على محرك webkit مثل متصفح Safari وChrome، متصفح Firefox يدعم خاصية transform فقط.

خاصية transition

هذه الخاصية رئيسية في ميزة التحريك بحيث تستطيع جمع قيم الخواص التي سيأتي شرحها في الأسفل مثل خاصية transition-property و transition-delay و transition-duration، هذه الخواص تستطيع إختصارها خلال خاصية transition، ومدعومة فقط في محرك webkit، تركيبة هذه الخاصية تكون بهذه الطريقة:

-webkit-transition: property duration delay;

بحيث إذا أردنا إختيار خاصية opacity للتأثير على ظهور شفافية العنصر خلال 3 ثواني وبتأخير لنصف ثانية يتم كتابة الخاصية كما توضح الشفرة التالية:

element {
 -webkit-transition: opacity 3s 1s;
}

يمكن جمع أكثر من خاصية لضمها إلى خاصية transition أيضاً:

element {
 -webkit-transition: opacity 3s 1s, top 1s, left 1s;
}

خاصية transition-property

تحدد هذه الخاصية خواص CSS الأخرى والتي تريد التأثير في ظهورها، مثلاً لو أردنا تحددي خاصية opacity فنكتب خاصية transition-property بهذه الطريقة:

-webkit-transition-property: opacity;

ويمكن إختيار أكثر من خاصية، على سبيل المثال لو أردنا إختيار خاصية opacity و width و height نستطيع كتابتهم معاً:

 -webkit-transition-property: opacity, width, height;
 

خاصية transition-duration

تحدد هذه الخاصية مدة ظهور تأثير خاصية CSS التي إخترناها في خاصية transition-property، إذا أردت تحديد 3 ثواني على كمدة لظهور خاصية opacity تكتب خاصية transition-duration بهذه الطريقة:

-webkit-transition-duration: 3s;

ويمكن تحديد أكثر من قيمة إذا كنت قد حددت خاصيتين مثل opacity و width على سبيل المثال:

-webkit-transition-property: opacity, width;
-webkit-transition-duration: 2s, 1s;

قمت بحديد ثانيتين كمدة ظهور لخاصية opacity و ثانية واحدة كمدة ظهور لخاصية width.

خاصية transition-delay

تحدد هذه الخاصية مدة تأخير ظهور التحريك للعنصر، أقصد بالتأخير الذي يحصل في البداية، إذا أردت تأخير تأثير الظهور أو التحريك لمدة ثانيتين تكتب خاصية transition-delay بهذه الطريقة:

-webkit-transition-delay: 2s;

خاصية transition-timing-function

توفر لك هذه الخاصية إمكانية تحديد نمط المدة ما بين بداية تحريك العنصر إلى نهاية حركته، بعبارة أخرى تحدد منحنى توقيت للتحريك الخاص بك، وتكون من عدة قيم وهي:

  • linear: يكون التحريك بسرعة ثابتة.
  • ease: يكون التحريك بتباطؤ تدريجي.
  • ease-in: يكون التحريك بطيء.
  • ease-out: يكون التحريك سريع.
  • ease-in-out: يكون التحريك بطيء في البداية وسريع في النهاية.
  • cubic-bezier: تستخدم فيه أربع قيم من X و Y، لتعريف شكل المنحنى الذي تحدد به سرعة التحريك، ويكتب بهذا الشكل cubic-bezier(x1,y1,x2,y2).

النمط الإفتراضي لسرعة تحريك العناصر يكون أسرع من الأنماط التي ذكرتها، فكرة هذه الأنماط أنك إذا حددت مدة تنفيذ تحريك أو تأثير بإستخدام أي خصائص CSS أخرى كمدة 3 ثواني بإستخدام جميع الأنماط التي ذكرتها لك بالأعلى ستكون المدة هي نفسها أي أن التحريك سيتم في ثلاثة ثواني بدون زيادة أو نقصان ولكن خلال التحريك سيحدث تباطؤ أو تسريع في البداية أو النهاية أو تحديد تباطؤ وتسريع من عند بإستخدام نمط cubic-bezier ولكن المدة تتم نفسها في جميع الأنماط.

تكتب خاصية transition-timing-function بهذه الطريقة إذا أردنا أن يكون نمط سرعة التحريك linear :

-webkit-transition-timing-function: linear;

يمكنك معرفة المزيد من تفاصيل خاصية transition-timing-function ويفضل أن تطبق مثال لتفهمه بشكل صحيح.

خاصية transform

تقوم هذه الخاصية بتحريك العنصر وتحسب قيمة التحريك بعدة صيغ مثل:

  • rotate: عبارة عن تدوير للعنصر وقياس قيمة الصيغة هي درجة الزاوية Degree.
  • translate: عبارة عن نقل أو تحريك للعنصر في أي جهة من الإتجاهات (top,left,bottom,right).
  • scale: عبارة عن قياس العنصر بتكبيره أو تصغيره بعدد مرات معين.

إذا أردت تحويل العنصر أي إستخدام صيغة rotate بدرجة 30° نكتب خاصية transform بهذه الطريقة:

-webkit-transform: rotate(30deg);

اما عن إستخدام صيغة translate، لو أردت نقل العنصر من مركزه الرئيسي إلى اليسار بقيمة 30px نكتب خاصية transform بهذه الطريقة:

-webkit-transform: translate(30px, 0);

وأخيراً إستخدام صيغة scale ويمكن عن طريقها تحديد تكبير أو تصغير العنصر أي نقص أو زيادة الضعف مع المحافظة على تناسب الطول والعرض والخصائص الأخرى، إذا أردت مضاعفة حجم العنصر في الصفحة بمقدار 2، تكتب خاصية transform بهذه الطريقة:

-webkit-transform: scale(2);

تستطيع كتابة جميع الصيغ مع بعضها في خاصية transform أيضاً:

-webkit-transform: rotate(30deg)  translate(30px, 0)  scale(2);

هذه صورة عامة لشرح صيغ خاصية transform الثلاثة:

إستخدام صيغة translate في CSS3 ستغني عن الخواص التي تعمل على خاصية position مثل top و left و bottom و right ما عدى z-index، يمكنك مشاهدة المثال على خاصية transform.

مثال عملي: صور عشوائية

المثال الذي سنضعه لتوضيح فكرة تحريك العناصر في CSS3 سيكون عبارة عن عدة صور عشوائية غير مرتبة بحيث عند تمرير الفأرة على أحد الصور يتم تكبيرها قليلاً مع تقديمها عن بقية الصور وتدويرها بشكل بسيط، لكن المثال الذي سأضعه لن يعمل إلا على متصفح يعمل على محرك webkit مثل Safari و Chrome بسبب وجود إستخدام خاصية transition التي لا يدعمها أحد متصفح غير محرك webkit حتى الآن.

تركيبة شفرة HTML وسأضع بها الصور الصور الشوائية:

<div id="pictures">
	<img src="pic1.jpg" alt="Picture 1" />
	<img src="pic2.jpg" alt="Picture 2" />
	<img src="pic3.jpg" alt="Picture 3" />
	<img src="pic4.jpg" alt="Picture 4" />
	<img src="pic5.jpg" alt="Picture 5" />
</div>

تنسيق CSS بسيط للصور بدون إستخدام ميزة تحريك العناصر:

#pictures {
	margin: 10px auto;
	padding: 10px;
	text-align: left;
	background-color: #fff;
	width: 97%;
	min-height: 600px;
	border: 2px solid #7d61af;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

#pictures img {
	position: absolute;
	border: 5px solid #d8d4e0;
	-moz-box-shadow: 1px 0 10px #333236;
	-webkit-box-shadow: 0 0 4px #333236;
}

لاحظ أني إستخدمت خاصية position في الشفرة السابقة وتستطيع إستبدالها بخاصية transform وبصيغة translate بالتحديد ولكن نحتاج إلى خاصية z-index أيضاً فجعلت التنسيق يعتمد على الخصائص المتعلقة بخاصية position مثل top,left,bottom,right.

عرض للصور بدون تأثيرات تحريك العناصر:

إضافة خواص تحريك العناصر عند تمرير الفأرة على أي صورة موجودة، علماً بأن الصور تم تحريكها قبل تمرير الفأرة بشكل بسيط لكي تكون عشوائية أكثر كما تبين شفرة CSS التالية (ستجد الإشارة إلى الخصائص المهمة في الشفرة أيضاً):

/* transition effects for pictures */
#pictures img.pic1, #pictures img.pic2, #pictures img.pic3, #pictures img.pic4, #pictures img.pic5, #pictures img.pic1:hover, #pictures img.pic2:hover, #pictures img.pic3:hover, #pictures img.pic4:hover, #pictures img.pic5:hover {
	-webkit-transition: height, width,z-index 1.5s, 1.5s, 1.5s ease-out;
	-moz-transition: height, width,z-index 1.5s, 1.5s, 1.5s ease-out; /* Not working in Firefox in this time */
}

/* Picture 1 */
#pictures img.pic1 {
	top: 60px;
	right: 100px;
	z-index: 1;
	width: 230px;
	height: 230px;
	-webkit-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
}
#pictures img.pic1:hover {
	height: 280px;
	width: 280px;
	z-index: 10;
}

/* Picture 2 */
#pictures img.pic2 {
	top: 50px;
	right: 400px;
	z-index: 1;
	height: 400px;
	width: 400px;
	-webkit-transform: rotate(-7deg);
	-moz-transform: rotate(-7deg);
}
#pictures img.pic2:hover {
	width: 430px;
	height: 430px;
	z-index: 10;
	-webkit-transform: rotate(0);
	-moz-transform: rotate(0);
}

/* Picture 3 */
#pictures img.pic3 {
	top: 180px;
	right: 300px;
	z-index: 3;
	width: 350px;
	height: 350px;
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
}
#pictures img.pic3:hover {
	width: 400px;
	height: 400px;
	z-index:10;
	top: 150px;
	-webkit-transform: rotate(5deg);
	-moz-transform: rotate(5deg);
}

/* Picture 4 */
#pictures img.pic4 {
	top: 300px;
	left: 135px;
	z-index: 5;
	width: 200px;
	height: 200px;
	-webkit-transform: rotate(-40deg);
	-moz-transform: rotate(-40deg);
}
#pictures img.pic4:hover {
	width: 240px;
	height: 240px;
	z-index:10;
	top: 250px;
	-webkit-transform: rotate(-20deg);
	-moz-transform: rotate(-20deg);
}

/* Picture 5 */
#pictures img.pic5 {
	top: 120px;
	left: 290px;
	z-index: 4;
	width: 230px;
	height: 250px;
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
}
#pictures img.pic5:hover {
	width: 300px;
	height: 300px;
	z-index:10;
	top: 100px;
	left: 300px;
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
}

الصورة النهائية بعد تحريك الصور العشوائية وإضافة التأثيرات عليها:

أمثلة أخرى على تحريك العناصر

CSS3 Clock

Polaroid Photo Viewer

Nat & Simon in New Zealand

Matrix Animation

jQuery DJ Hero

Falling Leaves

Polaroids with CSS3

بقية دروس الأمثلة تجدونها في صفحة الأمثلة نفسها أو رابط يشير إلى الدرس.