انتقالات CSS

❮ سابق التالي ❯

انتقالات CSS

تسمح لك انتقالات CSS بتغيير قيم الخصائص بسلاسة ، خلال مدة معينة.

مرر الماوس فوق العنصر أدناه لمشاهدة تأثير انتقال CSS:

CSS

ستتعرف في هذا الفصل على الخصائص التالية:

transition
transition-delay
transition-duration
transition-property
transition-timing-function

دعم المستعرض للتحولات

تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.

Property
transition	26.0	10.0	16.0	6.1	12.1
transition-delay	26.0	10.0	16.0	6.1	12.1
transition-duration	26.0	10.0	16.0	6.1	12.1
transition-property	26.0	10.0	16.0	6.1	12.1
transition-timing-function	26.0	10.0	16.0	6.1	12.1

كيفية استخدام CSS Transitions؟

لإنشاء تأثير انتقال ، يجب عليك تحديد شيئين:

خاصية CSS التي تريد إضافة تأثير إليها
مدة التأثير

ملاحظة: إذا لم يتم تحديد جزء المدة ، فلن يكون للانتقال أي تأثير ، لأن القيمة الافتراضية هي 0.

يوضح المثال التالي عنصر <div> أحمر بحجم 100 بكسل * 100 بكسل. حدد العنصر <div> أيضًا تأثير انتقال لخاصية العرض ، بمدة ثانيتين:

مثال

div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}

سيبدأ تأثير الانتقال عندما تتغير قيمة خاصية CSS المحددة (العرض).

الآن ، دعنا نحدد قيمة جديدة لخاصية العرض عندما يقوم المستخدم بالماوس فوق عنصر <div>:

مثال

div:hover {
width: 300px;
}

لاحظ أنه عندما يخرج المؤشر من العنصر ، فإنه سيتغير تدريجيًا إلى نمطه الأصلي.

قم بتغيير العديد من قيم الخصائص

يضيف المثال التالي تأثير انتقال لكل من خاصيتي العرض والارتفاع ، بمدة ثانيتين للعرض و 4 ثوانٍ للارتفاع:

مثال

div {
transition: width 2s, height 4s;
}

حدد منحنى السرعة للانتقال

تحدد الخاصية منحنى السرعة transition-timing-functionلتأثير الانتقال.

يمكن أن تحتوي خاصية دالة توقيت الانتقال على القيم التالية:

ease - يحدد تأثير انتقال ببداية بطيئة ، ثم سريعة ، ثم تنتهي ببطء (هذا افتراضي)
linear - يحدد تأثير الانتقال بنفس السرعة من البداية إلى النهاية
ease-in - يحدد تأثير انتقال مع بداية بطيئة
ease-out - يحدد تأثير الانتقال بنهاية بطيئة
ease-in-out - يحدد تأثير الانتقال مع بداية ونهاية بطيئين
cubic-bezier(n,n,n,n) - يتيح لك تحديد القيم الخاصة بك في دالة مكعب بيزير

يوضح المثال التالي بعض منحنيات السرعة المختلفة التي يمكن استخدامها:

مثال

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

تأخير تأثير الانتقال

تحدد الخاصية تأخيرًا ( transition-delayبالثواني) لتأثير الانتقال.

المثال التالي به تأخير لمدة ثانية واحدة قبل البدء:

مثال

div {
transition-delay: 1s;
}

الانتقال + التحول

يضيف المثال التالي تأثير انتقال إلى التحويل:

مثال

div {
transition: width 2s, height 2s, transform 2s;
}

خصائص انتقال CSS

يسرد الجدول التالي جميع خصائص انتقال CSS:

Property	Description
transition	A shorthand property for setting the four transition properties into a single property
transition-delay	Specifies a delay (in seconds) for the transition effect
transition-duration	Specifies how many seconds or milliseconds a transition effect takes to complete
transition-property	Specifies the name of the CSS property the transition effect is for
transition-timing-function	Specifies the speed curve of the transition effect

❮ سابق التالي ❯

دروس CSS

CSS متقدم

استجابة CSS

شبكة CSS

CSS SASS

أمثلة CSS

مراجع CSS

انتقالات CSS