CSS3 Modules

CSS3 transitions

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

CSS3 animations css3 التحويلات ثلاثية الأبعاد


transition هي إحدى مواصفات CSS3 ، تتيح لنا التحكم في الفترة الإنتقالية أثناء تغيير أنماط عنصر ما دون اللجوء إلى استعمال الفلاش أو جافاسكريبت . عادة عندما نُغير مثلا لون عنصر أثناء مرور مؤشر الفأرة فوقه "hover" ، فإننا ننتقل بصفة حادة و فورية من النمط الأصلي إلى النمط النهائي . باستعمال transition يمكننا التحكم في وقت بداية الفترة الإنتقالية و سرعتها و مدتها ، عبر مجموعة من الخاصيات ، أبدأ بسردها . ثم سنتعرف عليها عبر أمثلة .

رقم أول إصدار للمتصفحات التي بدأت تدعم الخاصيات
الخاصية
transition26.0
-webkit- 4.0
16.0
-moz- 4.0
6.1
-webkit- 3.1
12.1
-o- 10.5
10.0
transition-delay26.0
-webkit- 4.0
16.0
-moz- 4.0
6.1
-webkit- 3.1
12.1
-o- 10.5
10.0
transition-duration26.0
-webkit- 4.0
16.0
-moz- 4.0
6.1
-webkit- 3.1
12.1
-o- 10.5
10.0
transition-property26.0
-webkit- 4.0
16.0
-moz- 4.0
6.1
-webkit- 3.1
12.1
-o- 10.5
10.0
transition-timing-function26.0
-webkit- 4.0
16.0
-moz- 4.0
6.1
-webkit- 3.1
12.1
-o- 10.5
10.0
بالنسبة للأرقام التي تلي المحددات التصديرية "-moz- , -o-, -webkit- " تدل عاى أول إصدار للمتصفح الذي بدأ يأخذ بعين الإعتبار هذه المحددات
بالنسبة للأرقام فوقها تدل على أول إصدار للمتصفح الذي بدأ يدعم الخاصية بدون استعمال المحددات

CSS3 transitions

transitions = التأثيرات التي تحدث أثناء الفترة الإنتقالية من نمط إلى آخر لنفس العنصر . لتفعيل هذه التأثيرات ، يجب على الأقل تحديد شيئين أساسين :

  • خاصية CSS التي سنطبق عليها التأثير مثل (width, height, color, transform ...)
  • ثم المدة الزمنية التي سيستغرقها التأثير (مدة الفترة الإنتقالية)

لنأخذ المثال أسفله . سنطبق التأثير على الخاصية "width" و ستستغرق المرحلة الأنتقالية 3 ثواني .

.box{
    width: 100px;
    -webkit-transition: width 3s; /* safari(3.1 => 6.1) , chrome(4.0 => < 26.0)*/
    -moz-transition: width 3s;   /* firefox(4.0 => < 16.0) */
    -o-transition: width 3s;    /* opera(10.5 =>  12.0) */
    transition: width 3s;      /* الخاصية الأصلية */
}

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

.box:hover {
    width: 350px;
 }

مشاهدة النتيجة

تطبيق التأثير على أكثر من خاصية

لتطبيق التأثير على مجموعة من الخاصيات ، نُفرّق بينها بعلامة ","
في المثال أسفله سنطبق التأثير على العناصر التالية : width,height,background-color,transform

.box {
   width: 100px;
   height: 100px;
   background-color: red;
   -webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
   transition:width 2s, height 2s, background-color 2s, transform 2s;
 }
.box:hover {
   width:200px;
   height:200px;
   background-color: yellow;
   -webkit-transform:rotate(180deg);
   transform:rotate(180deg);
 }
مشاهدة النتيجة

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

من أجل التحكم السليم في التأثيرات الإنتقالية ، يمكننا استعمال مجموعة من الخاصيات المختصرة :

  • transition-property :تحديد إسم أو أسماء الخاصيات التي سيشملها التأثير
  • transition-duration :تحديد الوقت الذي سيستغرقه التأثير
  • transition-timing-function :تحديد منحنى السرعة للتأثير الإنتقالي
  • transition-delay : تحدد وقت بداية التأثير

transition-property

بدل كتابة الخاصيات التي سيشملها التأثير كقيم للخاصية transition . و لأسباب تنظيمية و تسهيل الإستعمال ، من الأفضل القيام بسرد هذه الخاصيات كقيم للخاصية transition-property . مثلا إذا أردنا تطبيق التأثير على الطول و العرض و اللون ، نستعملها كالتالي :

.box{ transition-property : width, height, color;}

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

transition-duration

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

.box {
   transition-property: width, height;
   transition-duration: 2s;
}

أو تحديد مدة زمنية مختلفة لكل خاصية على حدة ، في المثال أسفله سيستغرق التأثير ثانيتين للعرض و أربع ثواني للطول

.box {
   transition-property: width, height;
   transition-duration: 2s, 4s;
}

لنرى مثالا للخاصيتين :

.box {
   width: 100px;
   height: 100px;
   background-color: red;
   -webkit-transition-property: width, height, background-color;
   transition-property: width, height, background-color;

   -webkit-transition-duration: 2s, 3s, 4s;
   transition-duration: 2s, 3s, 4s;
 }
.box:hover {
   width: 300px;
   height: 300px;
   background-color: green;
 }
مشاهدة النتيجة

transition-delay

تُحدد الوقت الذي يجب انتظاره قبل بدأ تفعيل التأثير

.box {
   -webkit-transition-delay: 2s;
   transition-delay: 2s;
}
مشاهدة النتيجة

transition-timing-function

.box {
   -webkit-transition-timing-function: linear;
   transition-timing-function: linear;
 }

تتيح لنا الخاصية transition-timing-functionاللعب على سرعة مراحل التأثير الإنتقالية ، مثلا يمكننا بدأ التأثير بسرعة بطيئة و إنهائه بطريقة أسرع ، أو الحفاظ على نفس السرعة خلال كل وقت التأثير ... إلخ . تأخذ هذه الخاصية مجموعة من القيم :
cubic-bezier() |linear |ease |ease-in |ease-out |ease-in-out |initial |inherit

قيم الخاصية transition-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)

مثال 1 ، باستعمال أسماء القيم

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

نفس المثال ، باستعمال مكعب بيزيي

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