انتقال
يتمثل الانتقال الأساسي الذي يتضمن خصائص CSS في تحديد ونقل عنصر من حالة السكون الخاصة به (على سبيل المثال، خلفية زرقاء داكنة) إلى حالة التحويم أو الحالة النشطة (على سبيل المثال، خلفية زرقاء فاتحة).
يمكن استخدام التحويلات مع التحويلات (بالإضافة إلى رفع الأحداث مثل :hover أو :focus) لإنشاء بعض الرسوم المتحركة. قم بتخفيف لون الخلفية، وقم بتحريك عنصر وتدوير كائن، كل ذلك باستخدام انتقالات CSS.
وفيما يلي المحتوى المقتبس: # التنقل أ { لون الخلفية: أحمر } |
بعض المعلمات للتحويل
خاصية الانتقال
حدد اسم خاصية CSS للتحويل. على سبيل المثال، في المثال أعلاه، يتم تطبيق التحويل على خاصية لون الخلفية.
المدة الانتقالية
حدد الوقت المستغرق للتحويل (الوقت المستغرق للتغيير من السمة القديمة إلى السمة الجديدة)
وظيفة توقيت الانتقال
يمكن أن يفهم على أنه تأثير مفرط. يحدد القيمة المتوسطة أثناء التحويل. يمكن تحديدها باستخدام مكعب بيزير. هناك بالطبع عدة قيم مدمجة شائعة الاستخدام: سهولة |. سهولة الدخول |
تأخير الانتقال
هذا أسهل للفهم، فهو وقت تأخير التحويل. يمكن أن يكون الوقت عددًا صحيحًا موجبًا أو عددًا صحيحًا سالبًا أو صفرًا. عندما لا يكون صفرًا، يجب ضبط الوحدة على s (ثواني) أو ms (ملي ثانية). عندما يكون رقمًا سالبًا، سيتم عرض الإجراء المحول من تلك النقطة الزمنية، وسيتم اقتطاع الإجراء السابق.
ملحوظة: تمت إضافة جزء المعلمة أثناء الترجمة وهو غير موجود في النص الأصلي.
دعم المتصفح
رائعة مثل سمة التحويل، ولكنها مدعومة حاليًا فقط من خلال متصفحات WebKit. -moz-transition متاح بالفعل في الإصدارات الليلية الأخيرة من Firefox 3.7. يمكنك أيضًا إضافة -moz-transition إلى CSS الخاص بك لإجراء التحسينات المستقبلية. يمكنك أيضًا إضافة خاصية بدون البادئة الخاصة، فقط في حالة حدوث ذلك.
الرسوم المتحركة
الرسوم المتحركة هي المكان الذي يكون فيه CSS 3 مفيدًا للغاية. يمكنك دمج جميع العناصر التي ناقشناها أعلاه مع خصائص الرسوم المتحركة مثل مدة الرسوم المتحركة واسم الرسوم المتحركة ووظيفة توقيت الرسوم المتحركة لإنشاء تأثيرات مثل رسوم فلاش المتحركة - CSS الخالصة.
وفيما يلي المحتوى المقتبس: #تدوير { |
يمكن رؤية كود الرسوم المتحركة CSS الرائع والعرض التوضيحي عبر الإنترنت على موقع webkit . يمكن مشاهدة العرض التوضيحي على أي موقع ويب، لكن تأثير الرسوم المتحركة يكون مرئيًا فقط في إصدار البناء الليلي من WebKit على نظام التشغيل Mac OS (Snow Leopard). يبدو الأمر كما هو الحال في الفيديو أعلاه، وإذا كنت تستخدم نظام التشغيل Mac OS (إصدار Snow Leopard)، فأعتقد أنه من المفيد تثبيت مجموعة أدوات ويب لترى التأثير بنفسك (إنه رائع حقًا). مستخدمو نظام Windows غير قادرين مؤقتًا على تقدير هذا التأثير.
بعض معلمات الرسوم المتحركة
تشبه معلمات الرسوم المتحركة إلى حد ما معلمات الترجمة، لذلك إذا فهمت معلمات الترجمة، فليس من الصعب فهمها هنا.
اسم الرسوم المتحركة
اسم الرسوم المتحركة.
مدة الرسوم المتحركة
حدد الوقت اللازم لتشغيل الرسوم المتحركة مرة واحدة. الافتراضي هو 0؛
وظيفة توقيت الرسوم المتحركة
تحديد طريقة تشغيل الرسوم المتحركة تشبه إعدادات المعلمة وظيفة توقيت الانتقال.
تأخير الرسوم المتحركة
تحديد متى تبدأ الرسوم المتحركة
عدد تكرار الرسوم المتحركة
تحديد عدد الحلقات، اللانهائي يعني مرات غير محدودة. الافتراضي هو 1.
-webkit-الرسوم المتحركة-الاتجاه
اتجاه تشغيل الرسوم المتحركة، قيمتان، الافتراضي طبيعي في هذا الوقت، سيتم تشغيل كل دورة من الرسوم المتحركة للأمام. القيمة الأخرى هي بديلة، ثم سيتم تشغيل الأوقات ذات الأرقام الزوجية للأمام، وسيتم لعب الأوقات ذات الأرقام الفردية في الاتجاه المعاكس.
دعم المتصفح
لسوء الحظ، في الوقت الحالي، لا يدعم سوى عدد قليل من المتصفحات الرسوم المتحركة لـ CSS. تعمل الرسوم المتحركة CSS ثنائية الأبعاد في Safari 4 (Leopard)، وChrome 3، وSafari Mobile، وShira، ومتصفحات Webkit الأخرى. يدعم Safari 4 (Snow Leopard) الرسوم المتحركة ثلاثية الأبعاد.