أثر التحويلات CSS3

تسمح وظيفة تحويلات CSS3 لتغيير قيم خصائص CSS بالتحويل بسلاسة خلال الوقت المحدد.

فهم تحويلات CSS3

عادةً، عندما تتغير قيمة خاصية CSS، يتم تحديث النتيجة التمثيلية على الفور. مثال شائع هو تغيير لون الخلفية للزر عند وضع الفأرة عليه. في الحالة العادية، عند وضع المؤشر على الزر، يتم تغيير لون الخلفية للزر من القيمة القديمة إلى القيمة الجديدة.

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

سيقوم هذا المثال بعرض كيفيةbackground-colorتطبيق الحركة عند وضع الفأرة على زر HTML.

button　{
　　　　background:　#fd7c2a;
　　　　/* For Safari 3.0+ */
　　　　-webkit-transition-property: background;
　　　　-webkit-transition-duration: 2s;
　　　　
　　　　transition-property: background;
　　　　transition-duration: 2s;
}
button:hover　{
　　　　background:　#3cc16e;
}

يجب عليك تحديد على الأقل خصائص transition-property وtransition-duration (أكبر من 0) لجعلهم يولدون تأثير التحويل. ولكن، جميع الخصائص الأخرىخصائص التحويلهي اختيارية لأن قيمتها الافتراضية لن تمنع حدوث التحويل.

إجراء تحويلات متعددة

يمكن استخدام عدة قيم لكل خصائص التحويل، ومفصولة بالفاصلة، مما يوفر طريقة سهلة لتعريف عدة تحويلات تحتوي على إعدادات مختلفة في وقت واحد.

button　{
　　　　background:　#fd7c2a;
　　　　border: 3px solid #dc5801;
　　　　/* For Safari 3.0+ */
　　　　-webkit-transition-property: background, border;
　　　　-webkit-transition-duration: 1s, 2s;
　　　　
　　　　transition-property: background, border;
　　　　transition-duration: 1s, 2s;
}
button:hover　{
　　　　background:　#3cc16e;
　　　　border-color: #288049;
}

خصائص اختصار التحويل

عند تطبيق التحويل يجب مراعاة العديد من الخصائص. ولكن يمكن أيضًا تحديد جميع خصائص التحويل في سمة واحدة لتقليل الكود.

خصائص التحويل هي خصائص مختصرة تستخدم لتعيين جميع خصائص التحويل الفردية في ترتيب مذكور (أي خصائص transition-property، transition-duration، transition-timing-function وtransition-delay المذكورة في الترتيب المذكور).

عند استخدام هذه الخاصية، تأكد من اتباع هذا الترتيب للقيم.

button　{
　　　　background:　#fd7c2a;
　　　　-webkit-transition:　background　2s　ease-in　0s;　/*　For　Safari　3.0+　*/
　　　　transition:　background　2s　ease-in　0s;　
}
button:hover　{
　　　　background:　#3cc16e;
}

خصائص التحويل CSS3

التالي يلخص بسرعة جميع خصائص التحويل: