قام كل مطور بنسخ كتلة من @keyframes من إجابة Stack Overflow، تم لصقها وتحديثها ووجدت العنصر ثابتًا تمامًا. تسع مرات من أصل عشرة السبب ممل: اسم الرسوم المتحركة في @keyframes القاعدة لم تتطابق مع الاسم الموجود في animation الاختصار، أو تم ترك المدة عند الصفر، أو لم يهبط الفصل أبدًا على العنصر. السبب الآخر هو أن الرسوم المتحركة للإطار الرئيسي هي إحدى زوايا CSS حيث لا يمكنك الحكم على النتيجة من خلال قراءة الكود. لا يخبرك تسلسل النسب المئوية والتحويلات بأي شيء عما إذا كانت الحركة تبدو سلسة أو سريعة أو بدوار البحر حتى تشاهدها وهي تعمل.
الرسوم المتحركة CSS هي آلية المتصفح '؛ لتحريك عنصر من خلال تسلسل مسمى من الأنماط بمرور الوقت. على عكس الانتقال، الذي يحرك تغييرًا واحدًا وينتظر المشغل، تتبع الرسوم المتحركة أ @keyframes يمكن للنص الذي يحتوي على أكبر عدد ممكن من الخطوات أن يتكرر إلى الأبد، ويبدأ من تلقاء نفسه لحظة تطبيقه. إن ما يقوي تحميل الغزالين، ونبضات الانتباه، وتأثيرات الدخول، وكل جزء من الحركة المحيطة هو ما يجعل الواجهة تبدو حية. لكن النصفين، الإطارات الرئيسية والاختزال، يجب أن يتفقا تمامًا، ويجمع الاختصار سبع أو ثماني قيم في سطر واحد بترتيب لا يحفظه معظم الناس أبدًا.
ال مولد الرسوم المتحركة CSS يزيل التخمين. يمكنك اختيار حركة من مكتبة الإعدادات المسبقة، وضبط المدة، والتيسير، والتأخير، وعدد التكرار والاتجاه، ومشاهدتها وهي تلعب على عنصر المعاينة المباشرة. الأداة تكتب كلا من @keyframes القاعدة والمطابقة animation الاختصار في مربع جاهز للنسخ، مع مزامنة الأسماء بالفعل، بحيث تعمل الكتلة التي تلصقها في المرة الأولى.
ليرة تركية؛DR: تقوم الرسوم المتحركة CSS بتحريك عنصر من خلال
@keyframesالتسلسل مع مرور الوقت، وعلى عكس الانتقال، فإنه لا يحتاج إلى مشغل ويمكنه التكرار. ال@keyframesالاسم وanimation-nameيجب أن يتطابق تمامًا، وهذا هو السبب الوحيد الأكثر شيوعًا لعدم قيام الرسوم المتحركة بأي شيء. يحمل الاختصار الاسم والمدة ووظيفة التوقيت والتأخير وعدد التكرارات والاتجاه ووضع التعبئة. تفضل الرسوم المتحركةtransformوopacityللحصول على حركة سلسة ومركبة. يمنحك هذا المولد أربعة عشر إعدادًا مسبقًا، والتحكم الكامل في التشغيل والمعاينة المباشرة، وينبعث كلاً من الإطارات الرئيسية والاختصار معًا. يتم تشغيله بالكامل في متصفحك بدون تسجيل.
ما هي المشكلة التي يحلها مولد الرسوم المتحركة CSS؟
الشيء المحرج في الرسوم المتحركة للإطار الرئيسي هو الرحلة ذهابًا وإيابًا. لضبط الارتداد باليد تكتب @keyframes القاعدة، اكتب animation الخط، احفظ الملف، قم بالتبديل إلى المتصفح، وانتظر إعادة التحميل، وشاهد. إذا كان الارتداد عدوانيًا جدًا، فيمكنك تغيير واحد translateY القيمة وقم بالحلقة بأكملها مرة أخرى. نظرًا لأن هذه الدورة بطيئة، فإن معظم الأشخاص يقبلون الإصدار الأول الذي لا يبدو مكسورًا بدلاً من الإصدار الذي يبدو صحيحًا، والفرق بين هذين الاثنين هو بالضبط الطلاء الذي يفصل الواجهة المدروسة عن القالب.
يقوم المولد بطي تلك الحلقة بنقرة واحدة. اخترت إعدادًا مسبقًا، واسحب شريط تمرير المدة، ويقوم عنصر المعاينة بتشغيل الحركة التي أمامك على الفور. تبديل وظيفة التوقيت من ease إلى منحنى بيزير والتغيير في الشعور فوري. اضبط عدد التكرارات على عدد لا نهائي وحلقات الرسوم المتحركة حتى تتمكن من دراستها. بعد بضع دقائق من ذلك، يمكنك بناء حدس لما تبدو عليه ستمائة مللي ثانية مقابل ألف ومائة، وهو الإحساس الذي تحتاجه لاتخاذ قرارات حركة جيدة في كل مكان آخر.
هناك حجة صحة أيضا. لا يمكنك إنتاج مشوه animation القيمة عن طريق الاختيار من بين القوائم وسحب أشرطة التمرير، ولا يمكنك كتابة اسم الإطار الرئيسي بشكل خاطئ، لأن الأداة تربط الاختصار بالإطارات الرئيسية التي أنشأتها. الإخراج آمن دائمًا للصقه. هذه الموثوقية هي نفس السبب الذي يجعلني أبقي منشئي CSS المرئيين قريبين من الخصائص الأخرى، وهي نفس الغريزة وراء الوصول إلى مولد التدرج بدلاً من حساب توقفات اللون في رأسي، أو مولد الظل الصندوقي بدلا من التخمين في نصف قطر طمس.
كيف تختلف الرسوم المتحركة CSS عن انتقال CSS؟
يؤدي هذا إلى رفع مستوى الأشخاص باستمرار، لذا فهو يستحق الدقة. يؤدي الانتقال إلى تحريك خاصية واحدة بين حالتين ويتطلب شيئًا للتغيير، أو التحليق، أو التركيز، أو فئة تم تبديلها، قبل تشغيلها. لها قيمة بداية وقيمة نهائية ولا شيء بينهما. الرسوم المتحركة، على النقيض من ذلك، تتبع أ @keyframes القاعدة التي يمكنها تحديد أي عدد من الخطوات الوسيطة، بحيث يمكن للعنصر التحرك عبر تصميم الرقصات بالكامل بدلاً من خط مستقيم من A إلى B. كما أنه لا ينتظر أي شيء: قم بتطبيقه وتشغيله.
والنتيجة العملية هي أنك تصل إلى مرحلة انتقالية عندما تريد تسهيل تغيير الحالة، وإلى رسوم متحركة عندما تريد حركة جوهرية للعنصر. الزر الذي يصبح داكنًا عند التمرير هو انتقال. الدوار الذي يدور إلى الأبد، أو الشارة التي تنبض لجذب العين، أو البطاقة التي تنزلق لأعلى أثناء تحميل الصفحة كلها رسوم متحركة، لأن الحركة تحدث من تلقاء نفسها وغالبًا ما تتكرر. إذا كنت لا تزال تقرر أي تأثير يحتاج إليه، فإن القاعدة الأساسية بسيطة: إذا بدأ إجراء المستخدم وذهب في اتجاه واحد، فاستخدم الانتقال؛ إذا تم تشغيله بمفرده، أو تكراره، أو كان يحتوي على أكثر من خطوتين، فاستخدم الرسوم المتحركة. مولد انتقال CSS هي الأداة المصاحبة للحالة الأولى، ويغطي الاثنان معظم الحركة التي ستكتبها على الإطلاق.
| جانب | الانتقال | الرسوم المتحركة |
|---|---|---|
| الزناد | يحتاج إلى تغيير الحالة (التحويم، التركيز، الفصل) | يبدأ من تلقاء نفسه عند تطبيقه |
| خطوات | اثنان، البداية والنهاية | أي رقم عبر @keyframes |
| حلقات | لا، يعمل مرة واحدة لكل تغيير | نعم مع iteration-count |
| الاستخدام النموذجي | تأثيرات التحويم والتركيز | المغازل، البقول، المداخل |
ما هو الترتيب الصحيح لاختصار الرسوم المتحركة؟
ال animation الاختصار كثيف. يمكن أن يحمل اسم الإطار الرئيسي، والمدة، ووظيفة التوقيت، والتأخير، وعدد التكرار، والاتجاه، ووضع التعبئة، وحالة التشغيل، كل ذلك في سطر واحد، ويكون الترتيب مهمًا لقيمتي الوقت بالطريقة التي يتم بها بالضبط التحولات. يكتب هذا المولد الاسم أولاً، ثم وظيفة المدة والتوقيت، ثم التأخير الاختياري، ثم عدد التكرار، والاتجاه، ووضع التعبئة، على سبيل المثال animation: fadeIn 0.6s ease 1 both. تعد كتابة الاسم أولاً أمرًا قانونيًا لأن أسماء الإطارات الرئيسية ليست كلمات رئيسية لـ CSS، ويتم قراءتها بشكل أكثر وضوحًا من دفن الاسم في النهاية.
القاعدة الوحيدة التي تلتقط الجميع هي قيمتي الوقت. المدة والتأخير في المرتين، ويخبرهما CSS عن بعضهما البعض فقط حسب الموضع: قيمة المرة الأولى هي المدة والثانية هي التأخير. كل شيء آخر في الاختصار هو كلمة رئيسية أو رقم بدون وحدة، لذلك لا يمكن الخلط بينه وبين الوقت. ولهذا السبب يمكن للأداة إسقاط التأخير بأمان عندما يكون صفرًا، لأنه لا وحدة 1 أو الكلمة infinite ما يلي هو عدد التكرار بشكل لا لبس فيه، وليس مرة ثانية. يحذف المولد أيضًا أي قيمة تساوي قيمة CSS الافتراضية الخاصة به، لذا أ normal الاتجاه أو أ none وضع التعبئة لا يشوش الإخراج أبدًا. والنتيجة هي اختصار يقرأ الطريقة التي ستكتب بها يدويًا بمجرد معرفة القواعد.
لماذا لا يتم تشغيل الرسوم المتحركة CSS الخاصة بي؟
هذا هو الجرف، والجميع تقريبًا يخرجون منه مرة واحدة على الأقل. السبب الوحيد الأكثر شيوعًا هو عدم التطابق بين animation-name والاسم في @keyframes قاعدة. الخطأ المطبعي، أو اختلاف الكتابة بالأحرف الكبيرة، أو الاسم الذي تمت إعادة تسميته في مكان واحد وليس الآخر يترك المتصفح بدون قاعدة إطار رئيسي للارتباط به، لذلك لا يفعل شيئًا بصمت. لا يوجد خطأ ولا تحذير؛ العنصر موجود هناك ببساطة. نظرًا لأن هذا المولد يكتب كلا النصفين معًا من نفس الاسم، فإن فئة الخطأ بأكملها تختفي، وهو جزء كبير من النقطة.
الأسباب الأخرى تستحق المعرفة لأنها تظهر عند كتابة الرسوم المتحركة يدويًا. مدة الصفر تعني أن الرسوم المتحركة تكتمل على الفور ولن تراها أبدًا. عنصر هو display: none لا يقوم بتشغيل الرسوم المتحركة الخاصة به على الإطلاق، لذا فإن التلاشي الذي يعتمد على العنصر الذي يتم عرضه لن يتم تشغيله. يتم تجاهل الخاصية المفقودة أو التي بها أخطاء إملائية داخل الإطار الرئيسي بهدوء بدلاً من وضع علامة عليها. والرسوم المتحركة مع animation-fill-mode: noneيقوم الإعداد الافتراضي بإعادة العنصر إلى أنماطه غير المتفق عليها بمجرد انتهائه، والذي يمكن أن يبدو وكأنه لم يتم تشغيله أبدًا إذا كانت الحركة دقيقة. تظهر مشاهدة الرسوم المتحركة في المعاينة المباشرة معظمها في ثوانٍ، وهذا هو الحال بالنسبة لبناء الحركة حيث يمكنك رؤيتها بدلاً من إعادة التحميل في ملف تستمر في إعادة تحميله.
ماذا يفعل وضع ملء الرسوم المتحركة؟
وضع التعبئة هو الإعداد الذي يفهمه الأشخاص أخيرًا ويحتاجون إليه بشدة. فهو يقرر الأنماط التي يظهرها العنصر خارج النافذة النشطة للرسوم المتحركة '؛، قبل أن يبدأ أثناء أي تأخير وبعد انتهائه. الافتراضي، none، يعني أن العنصر يتجاهل الإطارين الرئيسيين الأول والأخير عندما لا يتم تشغيل الرسوم المتحركة، لذلك فهو يجلس في أنماطه العادية قبل الرسوم المتحركة ويعود إليها بعد ذلك. هذا الارتداد هو مصدر إحباط شائع جدًا: تقوم بتحريك عنصر ليتلاشى فيه، ويتلاشى بشكل جميل، ثم يختفي مرة أخرى في اللحظة التي تنتهي فيها الرسوم المتحركة، لأنه مع none النهائي opacity: 1 يتم تجاهل الإطار الرئيسي بمجرد انتهاء الرسوم المتحركة.
الإصلاح هو animation-fill-mode: forwards، مما يحافظ على تطبيق الإطار الرئيسي الأخير بعد انتهاء الرسوم المتحركة، بحيث يظل العنصر الباهت مرئيًا. backwards يطبق الإطار الرئيسي الأول أثناء أي تأخير قبل بدء الرسوم المتحركة، وهو أمر مفيد عندما يكون لديك تأخير ولا تريد أن يومض العنصر في حالته الافتراضية أولاً. both يقوم بالأمرين معًا في وقت واحد وهو الخيار العام الأكثر أمانًا للرسوم المتحركة للمدخل، ولهذا السبب يقوم هذا المولد بإعداد الرسوم المتحركة الجديدة افتراضيًا both. إن فهم وضع التعبئة هو الفرق بين المدخل الذي يهبط والمدخل الذي يتراجع، ومن الأسهل بكثير فهمه عن طريق تبديله في المعاينة ومشاهدة تغيير النهاية بدلاً من قراءة المواصفات باردة.
متى يجب أن تتكرر الرسوم المتحركة، وكيف يمكنني التحكم فيها؟
يحدد عدد التكرارات عدد مرات تشغيل الرسوم المتحركة. اضبطه على رقم صحيح موجب وتكرر الرسوم المتحركة ذلك عدة مرات ثم تتوقف؛ اضبطه على infinite ويتكرر إلى الأبد. الرسوم المتحركة الحلقية هي الخيار الصحيح للحركة المحيطة والمستمرة، والدوار الذي يُظهر حدوث العمل، والنبض الذي يبقي الدعوة إلى العمل حية، والطفو الدقيق الذي يمنح صورة البطل بعض الحياة. الرسوم المتحركة ذات اللقطة الواحدة، التي يتم تشغيلها مرة واحدة، مخصصة للمداخل والمخارج، حيث يكون للحركة بداية ونهاية واضحتين وتكرارها سيكون مشتتًا للانتباه.
يقترن الاتجاه بعدد التكرارات لتشكيل كيفية تشغيل كل تمريرة. الافتراضي normal يلعب كل تكرار من الإطار الرئيسي الأول إلى الأخير. reverse يلعب كل واحد إلى الوراء. alternate يقوم بتشغيل التمريرة الأولى للأمام والتمريرة التالية للخلف، مع اختبار الاتصال بين نقاط النهاية، وهي الطريقة التي يمكنك من خلالها بناء نبض سلس ذهابًا وإيابًا دون تحديد رحلة العودة في الإطارات الرئيسية. alternate-reverse يبدأ للخلف ويتناوب من هناك. يكشف المولد الأربعة حتى تشعر بالفرق: نبض مع alternate يتنفس ويخرج بشكل طبيعي، في حين أن نفس الإطارات الرئيسية مع normal ويجب أن يقوم عدد زوجي من الخطوات بتشفير الإرجاع بأنفسهم. للحركة الحلقية، alternate تنتج دائمًا تقريبًا نتيجة عضوية أكثر مع عمل أقل للإطار الرئيسي.
ما هي الخصائص التي يجب أن أقوم بتحريكها للحصول على أداء سلس؟
تحدد الخصائص التي تحركها ما إذا كانت الحركة تسير بمعدل ستين إطارًا سلسًا في الثانية أم أنها تتلعثم، والاختيار هو نفسه بالنسبة للانتقالات. يفضل transform و opacity. يمكن تسليم كلاهما إلى المُنشئ وتحريكهما دون أن يقوم المتصفح بإعادة حساب تخطيط الصفحة، بحيث يظلان سلسين حتى على الأجهزة المتواضعة وتحت التحميل. هذا هو السبب في البطاقة التي تنزلق مع transform: translateY يبدو الأمر سهلاً بينما يتم تحريك نفس البطاقة باستخدام top أو margin-top يشعر بالخشونة. تم بناء كل مدخل محدد مسبقًا في هذا المولد transform و opacity لهذا السبب بالضبط.
الخصائص التي يجب تجنب تحريكها في تسلسل الإطار الرئيسي هي تلك التي تؤدي إلى التخطيط width، height، top، left، margin و padding. يؤدي تغيير أي من هذه العناصر إلى إجبار المتصفح على إعادة حساب هندسة العنصر وكل شيء حوله في كل إطار، وهو أمر مكلف وهو السبب الأكثر شيوعًا للرسوم المتحركة المتعرجة، ويزداد سوءًا عندما تتكرر الرسوم المتحركة وتدفع هذه التكلفة بشكل مستمر. إذا كنت تريد أن ينمو عنصر، أ transform: scale دائمًا ما يكون أرخص من الرسوم المتحركة width و height، ويبدو متطابقًا تقريبًا. الحجة الأوسع لتجميع مجموعة من الأدوات التي توجهك نحو المسار الرخيص موجودة في مجموعة أدوات مطور الويب القطعة، وعادات سير العمل التي تجعل الحركة قرارًا سريعًا وليس قرارًا بطيئًا موجودة في أدوات إنتاجية المطور مرشد.
كيف يحافظ المولد على صدقة المعاينة؟
يخاطر كل منشئ مرئي بالمعاينة والرمز المصدر الذي ينجرف بعيدًا حتى تعلمك الأداة قيمة لن يتم إعادة إنتاجها. يقوم هذا المولد بحقن الدقيق @keyframes القاعدة هي إخراجها إلى الصفحة وتطبيقها بدقة animation الاختصار يظهر لك عنصر المعاينة، وبالتالي فإن الحركة التي تشاهدها هي الحركة التي سينتجها CSS المنسوخ. لا يوجد مسار رسوم متحركة منفصل قد يختلف، واسم الإطار الرئيسي في المعاينة هو الاسم الموجود في الإخراج.
نظرًا لأن الرسوم المتحركة تعمل على التركيب ثم تنتهي، فإن المعاينة تحتاج إلى طريقة لإعادة تشغيلها، والتي تتعامل معها الأداة عن طريق إعادة تحميل عنصر المعاينة عند الضغط على إعادة التشغيل. يعكس ذلك كيفية تصرف الرسوم المتحركة ذات اللقطة الواحدة أثناء الإنتاج، حيث يتم تشغيلها عندما يظهر العنصر ثم تحتفظ بحالتها النهائية وفقًا لوضع التعبئة. يظل الإخراج في حده الأدنى أيضًا، مما يؤدي إلى إسقاط التأخير الصفري وأي قيمة افتراضية بحيث تقوم فقط بنسخ الإعلانات ذات المعنى، وهو نفس الانضباط المتمثل في عدم إصدار أي شيء زائد عن الحاجة يتم تشغيله عبر مولد مرشح CSS والبناة المرئيون الآخرون. عندما تقوم بإقران رسم متحرك للإطار الرئيسي مع تخطيط يضع العنصر، فإن مولد فليكس بوكس هو رفيق طبيعي لبناء الهيكل المحيط.
ما هي المتصفحات التي تدعم الرسوم المتحركة CSS؟
يتم دعم الرسوم المتحركة لـ CSS في كل متصفح حالي وقد تم دعمها منذ أكثر من عقد من الزمن. ال @keyframes القاعدة، animation الاختزال وجميع أدواته الطويلة عالمية وغير مسبوقة، لذا فإن مخرجات هذا المولد تعمل في Chrome وFirefox وSafari وEdge بدون بادئات أو بدائل للبائع. المرجع النهائي هو مواصفات CSS Animations المستوى 1 من W3C، وهي المصدر الأساسي لكيفية تصرف كل جزء من الاختزال، ويستحق القراءة بمجرد أن يمنحك المولد إحساسًا ماديًا بما تفعله القطع. لسهولة الوصول، تذكر أن بعض المستخدمين قاموا بتعيين ملف prefers-reduced-motion التفضيل، ومن الممارسات الجيدة تغليف الرسوم المتحركة غير الأساسية في استعلام وسائط يحترمها، بحيث يمكن إيقاف تشغيل الحركة المحيطة للأشخاص الذين يجدونها غير مريحة.
إذا كنت تقوم بتجميع مجموعة أوسع من أدوات CSS المرئية، ومولد الانتقال و مولد تحويل CSS اجلس بشكل طبيعي بجانب هذا، نظرًا لأن التحويلات هي المادة الخام، فإن معظم هذه الرسوم المتحركة تتحرك والانتقالات تتعامل مع تغييرات الحالة التي لا تفعلها الرسوم المتحركة. كل شيء هنا يعمل من جانب العميل، وCSS الذي تنسخه هو ملكك لاستخدامه بدون وقت تشغيل أو خطوة بناء أو تبعية.
الأسئلة المتداولة
ما هو مولد الرسوم المتحركة CSS؟
مولد الرسوم المتحركة CSS هو أداة مرئية تقوم بإنشاء رسوم متحركة للإطار الرئيسي من الإعدادات التي تختارها. يمكنك اختيار إعداد مسبق، وتعيين المدة، والتيسير، والتأخير، وعدد التكرار والاتجاه، ويقوم بإخراج @keyframes القاعدة و animation يمكنك إعادة تشغيل الاختصار مع المعاينة المباشرة.
ما الفرق بين الرسوم المتحركة CSS وانتقال CSS؟
يؤدي الانتقال إلى تنشيط تغيير واحد بين حالتين ويحتاج إلى مشغل مثل التمرير للتشغيل. الرسوم المتحركة تتبع أ @keyframes تسلسل بأي عدد من الخطوات، يمكن أن يتكرر، ويبدأ من تلقاء نفسه بمجرد تطبيقه، دون انتظار تغيير الحالة.
ما الترتيب الذي يستخدمه اختصار الرسوم المتحركة؟
تكتب هذه الأداة اسم الإطار الرئيسي أولاً، ثم المدة ووظيفة التوقيت والتأخير وعدد التكرارات والاتجاه ووضع التعبئة، على سبيل المثال الرسوم المتحركة: fadeIn 0.6s ease 1 كلاهما. قيمة المرة الأولى هي دائمًا المدة والثانية هي التأخير، لذلك تتم قراءة قيمة زمنية واحدة على أنها المدة.
كيف يمكنني إنشاء حلقة رسوم متحركة CSS إلى الأبد؟
اضبط عدد التكرار على لا نهائي. في الاختصار الذي هو كلمة لا نهائي، كما هو الحال في الرسوم المتحركة: تدور 1s خطية لا نهائية. بدلاً من ذلك، يكرر أي رقم صحيح موجب الرسوم المتحركة التي تتكرر عدة مرات ثم تتوقف وفقًا لوضع التعبئة والاتجاه.
لماذا لا يتم تشغيل الرسوم المتحركة CSS الخاصة بي؟
السبب الأكثر شيوعًا هو عدم التطابق بين اسم الرسوم المتحركة واسم @keyframes، بما في ذلك الخطأ المطبعي أو اختلاف الحالة، مما يترك المتصفح بدون قاعدة للارتباط بها. تأكد أيضًا من أن المدة أعلى من الصفر وأن العنصر يتم عرضه، نظرًا لأن الرسوم المتحركة معروضة على الشاشة: لا يوجد أي عنصر لا يعمل.
ماذا تفعل خاصية وضع ملء الرسوم المتحركة؟
يقرر وضع التعبئة الأنماط التي يظهرها العنصر قبل بدء الرسوم المتحركة وبعد انتهائها. لا شيء افتراضي يعيد العنصر إلى أنماطه العادية عند انتهاء الرسوم المتحركة. يحافظ الإعداد للأمام على الإطار الرئيسي النهائي، ويطبق الإطار الرئيسي الأول للخلف أثناء التأخير، وكلاهما يفعل كليهما.
ما هي الخصائص التي يجب أن أقوم بتحريكها للحصول على أداء سلس؟
تفضل التحويل والعتامة. يمكن للمتصفح تحريكها على المُركب دون إعادة حساب التخطيط، بحيث تظل سلسة عند 60 إطارًا في الثانية. يؤدي تحريك العرض أو الارتفاع أو الأعلى أو اليسار أو الهامش إلى إعادة حساب التخطيط على كل إطار، وهو السبب المعتاد لتلعثم الرسوم المتحركة.
هل الرسوم المتحركة التي تم إنشاؤها CSS مجانية وآمنة للاستخدام؟
نعم. الأداة مجانية تمامًا بدون حدود للتسجيل أو الاستخدام، وتصدر CSS قياسيًا غير مسبوق مدعومًا في كل متصفح حديث. تتم جميع عمليات المعالجة في متصفحك، لذلك لا يتم تحميل أي شيء وتعمل الأداة دون اتصال بالإنترنت بمجرد تحميلها.
