التحولات CSS3

التحولات CSS3

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

الماوس فوق العناصر التالية:

دعم المتصفح

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

مباشرة بعد -webkit- الرقمية، -ms- أو -moz- قبل في دعم البادئة السمة الأولى رقم إصدار المتصفح.

كيف يعمل؟

CSS3 انتقال عنصر تغيير تدريجيا من نمط واحد إلى تأثير آخر.

ولتحقيق ذلك، يجب أن تعرف أمرين:

• وأود أن أضيف تأثير خصائص CSS
• تحديد مدة تأثير.

أمثلة

السمة العرض تطبيق تأثير انتقال، ومدة 2 ثانية:

div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}

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

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

أمثلة

أحكام عندما تعليق مؤشر الماوس (: تحوم) إلى العنصر <div> في الحالات التالية:

شعبة: تحوم
{
العرض: 300px؛
}

محاولة »

ملاحظة: عندما يكون مؤشر الماوس إلى العنصر، فإنه يتغير تدريجيا النمط الأصلي

عدد من التغييرات

لإضافة تأثير أكثر من أسلوب التغيير، إضافة سمات مفصولة بفواصل:

أمثلة

وأضاف الآثار العرض والطول، والانتقال:

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

محاولة »

خصائص المرحلة الانتقالية

يسرد الجدول التالي كل خصائص المرحلة الانتقالية:

مجموعة المثالان سمات كل الانتقال:

أمثلة

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

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}

محاولة »

أمثلة

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

div
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}

محاولة »