CSSالتأثيرات الإنتقالية

مفهوم التأثيرات الإنتقالية

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

التأثيرات الإنتقالية ( Transitions ) فكرتها ببساطة جعل تحديث القيم يتم بشكل تدريجي و خلال مدة تحددها أنت على حسب حاجتك.

مرّر إصبعك أو مؤشر الماوس على العناصر التالية و لاحظ كيف أن حالتها ستتغير بشكل سلسل جداً.

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

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

أساسيات التأثيرات الإنتقالية

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

• الخاصية التي تريد إضافة تأثير إنتقالي لها.
• المدة التي سيحدث خلالها التأثير الإنتقالي.

في المثال التالي قمنا بجعل عرض العنصر يصبح 300 بكسل بشكل تدريجي و خلال ثانية واحدة عندما يتم تمرير الماوس فوقه.

.btn {
    width: 200px;
    transition-property: width;
    transition-duration: 1s;
}

.btn:hover {
    width: 300px;
}

تغيير قيمة عدة خصائص أثناء الإنتقال

في حال أردت تغيير قيمة أكثر من خاصية أثناء الإنتقال، لديك خيارين:

• ذكر إسم كل خاصية تريد تغيير قيمتها مع وضع فاصلة بينهم.
• كتابة الكلمة all لتطبيق تأثير الإنتقال على جميع خصائص العنصر التي يتم تغيير قيمتها.

في المثال التالي قمنا بجعل عرض العنصر و لون خلفيته يتغيران خلال ثانية واحدة عندما يتم تمرير الماوس فوقه.

.btn {
    width: 200px;
    background-color: dodgerblue;
    transition-property: width, background-color;
    transition-duration: 1s;
}

.btn:hover {
    width: 300px;
    background-color: blueviolet;
}

في المثال التالي قمنا باستخدام الكلمة all لتطبيق تأثير الإنتقال على جميع خصائص العنصر التي يتم تغيير قيمتها.

.btn {
    width: 200px;
    background-color: dodgerblue;
    transition-property: all;
    transition-duration: 1s;
}

.btn:hover {
    width: 300px;
    background-color: blueviolet;
}

وضع فارق زمني بين القيم التي سيتم تغييرها

في حال أردت تغيير قيمة أكثر من خاصية أثناء الإنتقال و تريد تحديد المدة التي سيتم خلالها تغيير قيمة كل خاصية منهم على حدا، قم بوضع المدة التي سيتم خلالها تغيير قيمة كل خاصية منهم في الخاصية transition-duration مع وضع فاصلة بين كل مدتين بذات الترتيب الذي وضعت فيه أسماء الخصائص كقيمة في الخاصية transition-property.

في المثال التالي قمنا بجعل تأثير عرض العنصر يتم خلال ثانية واحدة و تأثير تغيير لون خلفيته يتغير خلال ثلاث ثواني عندما يتم تمرير الماوس فوق العنصر.

.btn {
    width: 200px;
    background-color: dodgerblue;
    transition-property: width, background-color;
    transition-duration: 1s, 3s;
}

.btn:hover {
    width: 300px;
    background-color: blueviolet;
}

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

في حال أردت جعل التأثير يبدأ بعد مضي مدة محددة، يمكنك استخدام الخاصية transition-delay و تمرير المدة لها كقيمة.

في المثال التالي قمنا بجعل التأثير الذي يحدث عند تمرير الماوس فوق العنصر يبدأ بعد الوقوف عليه بثانية.

.btn {
    width: 200px;
    background-color: dodgerblue;
    transition-property: all;
    transition-duration: 1s;
    transition-delay: .5s;
}

.btn:hover {
    width: 300px;
    background-color: blueviolet;
}

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

يمكنك استخدام الخاصية transition-timing-function لتحديد كيف ستكون سرعة تنفيذ التأثير.

فيما يلي القيم التي يمكنك وضعها لها كقيمة حتى تحدد كيف ستكون سرعة التنفيذ.

فيما يلي دوال يمكنك وضعها لها كقيمة حتى تحدد كيف ستكون سرعة التنفيذ.

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

.container:hover .circle {
    left: calc(100% - 50px);
}

.linear {
    background: #ED796D;
    transition-timing-function: linear;
}

.ease {
    background: #ED976D;
    transition-timing-function: ease;
}

.ease-in {
    background: #2ECC71;
    transition-timing-function: ease-in;
}

.ease-out {
    background: #3498DB;
    transition-timing-function: ease-out;
}

.ease-in-out {
    background: #1ABC9C;
    transition-timing-function: ease-in-out;
}

.cubic-bezier {
    background: #0A8EA0;
    transition-timing-function: cubic-bezier(0.1, 0.5, 1, 0.1);
}

.steps-start {
    background: #777;
    transition-timing-function: steps(5, start);
}

.steps-end {
    background: #777;
    transition-timing-function: steps(5, end);
}

إضافة التأثيرات الإنتقالية بشكل مختصر

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

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

في المثال التالي، قمنا بإضافة تأثير إنتقالي لمربع الإدخال. عند النقر بداخله سيتم تكبير حجمه خلال 0.3 ثانية.

input[name="search"] {
    width: 100px;
    transition: width ease-in-out .3s;
}

input[name="search"]:focus {
    width: 250px;
}