عادةً عندما تتغير قيمة خاصية CSS، سيقوم المتصفح فورًا بتحديث النمط المقابل. على سبيل المثال، عندما يمرر الماوس فوق العنصر، سيتم تطبيق النمط المحدد من خلال محدد :hover على العنصر على الفور. تمت إضافة وظيفة انتقال إلى CSS3، يمكنك من خلالها نقل العناصر بسلاسة من نمط إلى آخر خلال فترة زمنية محددة، على غرار الرسوم المتحركة البسيطة، ولكن دون اللجوء إلى الفلاش أو جافا سكريبت.
يوفر CSS 5 خصائص تتعلق بالانتقال، وهي كما يلي:
لتنفيذ تأثير الانتقال بنجاح، يجب تحديد شيئين:
(1) خصائص المعلمات وتأثيرات التحول في العناصر؛
(2) مدة تأثير الانتقال.
نصيحة: يحدث تأثير الانتقال عادةً عند تحريك الماوس فوق العنصر. إذا لم يتم تعيين مدة الانتقال، فلن يصبح تأثير الانتقال ساريًا لأن القيمة الافتراضية لوقت الانتقال هي 0.
1. خاصية التحول
يتم استخدام سمة خاصية النقل لتعيين اسم السمة في العنصر الذي يشارك في عملية النقل. ويكون تنسيق بناء الجملة كما يلي:
خاصية الانتقال: لا شيء|الكل|الخاصية؛
وصف المعلمة كما يلي:
لا شيء: يشير إلى عدم مشاركة أي سمات في تأثير الانتقال؛
الكل: يشير إلى أن كافة السمات تشارك في تأثير الانتقال؛
الخاصية: تحدد قائمة بأسماء خصائص CSS التي تطبق تأثيرات الانتقال. استخدم الفواصل لفصل أسماء الخصائص المتعددة.
رمز العينة كما يلي:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;border:3pxsolidblack;margin:10px0px0px10px;transition-property:width,background;}div:hover{width:200px;background- اللون: أزرق;</style></head><body><div></div></body></html>نتائج التشغيل:
2. المدة الانتقالية
يتم استخدام سمة مدة الانتقال لتعيين الوقت الذي يستغرقه الانتقال (بالثواني أو بالمللي ثانية) ويكون بناء الجملة كما يلي:
المدة الانتقالية:الوقت؛
من بينها، الوقت هو الوقت الذي يستغرقه إكمال تأثير الانتقال (بالثواني أو بالمللي ثانية)، والقيمة الافتراضية هي 0، مما يعني أنه لن يكون هناك أي تأثير.
إذا كانت هناك سمات متعددة تشارك في عملية النقل، فيمكنك أيضًا تعيين وقت الانتقال لهذه السمات بدورها، استخدم الفواصل لفصل السمات المتعددة، مثل مدة الانتقال: 1s، 2s، 3s؛. بالإضافة إلى ذلك، يمكنك أيضًا استخدام الوقت لتعيين الوقت المطلوب لعملية النقل لجميع العقارات المشاركة في عملية النقل. رمز العينة كما يلي:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;border:3pxsolidblack;margin:10px0px0px10px;transition-property:width,background;transition-duration:.25s,1s;}div :hover{width:200px;background-color:blue;}</style></head><body><div></div></body></html>3. وظيفة توقيت الانتقال
يتم استخدام سمة وظيفة توقيت الانتقال لتعيين نوع الرسوم المتحركة الانتقالية. القيم الاختيارية للسمة هي كما يلي:
4. تأخير الانتقال
يتم استخدام سمة تأخير النقل لتعيين متى يبدأ تأثير الانتقال، ويكون تنسيق بناء الجملة للسمة كما يلي:
تأخير الانتقال: الوقت؛
من بينها، يتم استخدام معلمة الوقت لتعيين وقت الانتظار قبل بدء تأثير الانتقال، بالثواني أو بالمللي ثانية.
5. الانتقال
سمة الانتقال هي اختصار للسمات الأربع المذكورة أعلاه، من خلال هذه السمة، يمكن تعيين السمات الأربع المذكورة أعلاه في نفس الوقت، ويكون تنسيق بناء الجملة للسمات كما يلي:
الانتقال: خاصية انتقالية - مدة انتقالية - توقيت - وظيفة - تأخير انتقالي؛
في سمة النقل، تعتبر خاصية النقل ومدة النقل معلمات مطلوبة، كما أن وظيفة توقيت النقل وتأخير النقل هي معلمات اختيارية يمكن حذفها إذا لم يكن ذلك ضروريًا. بالإضافة إلى ذلك، يمكن أيضًا تعيين مجموعات متعددة من تأثيرات الانتقال من خلال سمة الانتقال، ويتم فصل كل مجموعة بفواصل.