CSS3 التحولات
التحولات CSS3 تسمح لك بتغيير قيمة العقارات بشكل سلس (من قيمة واحدة إلى أخرى)، خلال مدة معينة.
مثال: ضع مؤشر الماوس فوق عنصر أدناه لمعرفة تأثير CSS3 الانتقال:
دعم المتصفح للانتقالات
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.
أرقام تليها -webkit-, -moz- ، أو -o- تحدد النسخة الأولى التي عملت مع بادئة.
| الملكية | |||||
|---|---|---|---|---|---|
| transition | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-delay | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-duration | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-property | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-timing-function | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
كيفية استخدام CSS3 التحولات؟
لخلق تأثير التحول، يجب عليك تحديد أمرين:
- الملكية CSS تريد إضافة تأثير ل
- مدة التنفيذ
ملاحظة: إذا لم يتم تحديد الجزء المدة، فإن الانتقال لن يكون لها تأثير، لأن القيمة الافتراضية هي 0.
يظهر المثال التالي 100px * 100px الأحمر <div> العنصر. و <div> وتحديد العنصر أيضا تأثير انتقال للخاصية العرض، مع مدة 2 ثانية:
مثال
div
{
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
}
سيبدأ تأثير انتقال عند الخاصية CSS المحدد (العرض) تتغير قيمة.
الآن، دعونا تحديد قيمة جديدة للخاصية العرض عندما يصطاد الفئران المستخدم على <div> العنصر:
لاحظ أنه عندما يصطاد الفئران المؤشر من عنصر، فإنه سيتم تغيير تدريجيا إلى النمط الأصلي.
تغيير العديد من القيم الملكية
يضيف المثال التالي تأثير انتقال لكل من العرض والممتلكات الارتفاع، مع مدة 2 ثانية للعرض و 4 ثواني لارتفاع:
مثال
div
{
-webkit-transition: width 2s, height 4s; /*
Safari */
transition: width 2s, height 4s;
}
انها محاولة لنفسك » تحديد منحنى سرعة الانتقال
و transition-timing-function الخاصية تحديد منحنى سرعة تأثير انتقال.
الخاصية الانتقال توقيت وظيفة يمكن أن يكون القيم التالية:
-
ease- تحدد تأثير انتقال مع بداية بطيئة، ثم بسرعة، ثم تنتهي ببطء (هذا هو الافتراضي) -
linear- يحدد تأثير انتقال بنفس السرعة من البداية الى النهاية -
ease-in- يحدد تأثير انتقال مع بداية بطيئة -
ease-out- يحدد تأثير انتقال مع نهاية بطيئة -
ease-in-out- يحدد تأثير انتقال مع بداية بطيئة ونهاية -
cubic-bezier(n,n,n,n)- يتيح لك تحديد القيم الخاصة بك في cubic-bezier وظيفة
يوضح المثال التالي بعض من منحنيات السرعة المختلفة التي يمكن استخدامها:
مثال
#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 تحدد الخاصية تأخير (في ثواني) للتأثير انتقال.
في المثال التالي على تأخير الثانية 1 قبل البداية:
الانتقال + التحول
المثال التالي يضيف أيضا التحول إلى تأثير انتقال:
مثال
div {
-webkit-transition: width 2s, height
2s, -webkit-transform 2s; /* Safari */
transition:
width 2s, height 2s, transform 2s;
} انها محاولة لنفسك » المزيد من الأمثلة الانتقالية
خصائص CSS3 الانتقال يمكن أن تكون محددة واحدا تلو الآخر، مثل هذا:
مثال
div
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
انها محاولة لنفسك » أو باستخدام الخاصية اختصار transition :
اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 » التمرين 4» التمرين 5 »
خصائص CSS3 الانتقالية
يسرد الجدول التالي كل خصائص المرحلة الانتقالية:
| الملكية | وصف |
|---|---|
| transition | خاصية الاختزال لتحديد خصائص انتقال الأربعة في خاصية واحدة |
| transition-delay | يحدد تأخير (في ثواني) للتأثير انتقال |
| transition-duration | يحدد عدد الثواني أو مللي ثانية يأخذ تأثير انتقال إلى استكمال |
| transition-property | يحدد اسم الخاصية CSS تأثير الانتقالية ل |
| transition-timing-function | يحدد منحنى سرعة تأثير انتقال |